Merge pull request #8314 from marmelab/fix-rti-value-update

Fix `RichTextInput` doesn't update when record field updates

packages/ra-input-rich-text/src/RichTextInput.spec.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import expect from 'expect';
+import { render, waitFor } from '@testing-library/react';
+import { Basic } from './RichTextInput.stories';
+
+describe('<RichTextInput />', () => {
+    it('should update its content when fields value changes', async () => {
+        const record = { id: 123, body: '<h1>Hello world!</h1>' };
+        const { container, rerender } = render(<Basic record={record} />);
+
+        await waitFor(() => {
+            expect(container.querySelector('#body').innerHTML).toEqual(
+                '<h1>Hello world!</h1>'
+            );
+        });
+
+        const newRecord = { id: 123, body: '<h1>Goodbye world!</h1>' };
+        rerender(<Basic record={newRecord} />);
+
+        await waitFor(() => {
+            expect(container.querySelector('#body').innerHTML).toEqual(
+                '<h1>Goodbye world!</h1>'
+            );
+        });
+    });
+});

packages/ra-input-rich-text/src/RichTextInput.tsx

@@ -108,6 +108,14 @@ export const RichTextInput = (props: RichTextInputProps) => {
 
     const { error, invalid, isTouched } = fieldState;
 
+    useEffect(() => {
+        if (!editor) return;
+
+        editor.commands.setContent(field.value, false, {
+            preserveWhitespace: true,
+        });
+    }, [editor, field.value]);
+
     useEffect(() => {
         if (!editor) return;