Fix ReactEditor.focus triggering onValueChange unexpectedly

ianstormtaylor · Jul 10, 2024 · 21aa5e3 · 21aa5e3
1 parent 5838e36
commit 21aa5e3
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 2 deletions.
diff --git a/packages/slate-react/src/components/slate.tsx b/packages/slate-react/src/components/slate.tsx
@@ -66,8 +66,14 @@ export const Slate = (props: {
         case 'set_selection':
           onSelectionChange?.(editor.selection)
           break
-        default:
+        case 'insert_node':
+        case 'remove_node':
+        case 'merge_node':
+        case 'split_node':
+        case 'move_node':
+        case 'set_node':
           onValueChange?.(editor.children)
+          break
       }
 
       setContext(prevContext => ({

diff --git a/packages/slate-react/src/plugin/react-editor.ts b/packages/slate-react/src/plugin/react-editor.ts
@@ -443,7 +443,6 @@ export const ReactEditor: ReactEditorInterface = {
       // Create a new selection in the top of the document if missing
       if (!editor.selection) {
         Transforms.select(editor, Editor.start(editor, []))
-        editor.onChange()
       }
       // IS_FOCUSED should be set before calling el.focus() to ensure that
       // FocusedContext is updated to the correct value

diff --git a/packages/slate-react/test/react-editor.spec.tsx b/packages/slate-react/test/react-editor.spec.tsx
@@ -85,6 +85,37 @@ describe('slate-react', () => {
           expect(windowSelection?.focusOffset).toBe(testSelection.focus.offset)
         })
       })
+
+      test('should not trigger onValueChange when focus is called', async () => {
+        const editor = withReact(createEditor())
+        const initialValue = [{ type: 'block', children: [{ text: 'test' }] }]
+        const onValueChange = jest.fn()
+
+        act(() => {
+          render(
+            <Slate
+              editor={editor}
+              initialValue={initialValue}
+              onValueChange={onValueChange}
+            >
+              <Editable />
+            </Slate>
+          )
+        })
+
+        expect(editor.selection).toBe(null)
+
+        await act(async () => {
+          ReactEditor.focus(editor)
+        })
+
+        expect(editor.selection).toEqual({
+          anchor: { path: [0, 0], offset: 0 },
+          focus: { path: [0, 0], offset: 0 },
+        })
+
+        expect(onValueChange).not.toHaveBeenCalled()
+      })
     })
   })
 })