Make onDomSelectionChange triggered after onClick. (#4132)

* Delay onDomSelectionChange but not cause performance issue. * Add changeset * Update changeset Changeset editor via GitHub's UI seems to violate our prettier rules 🤦🏼‍♂️ Co-authored-by: Dylan Schiemann <[email protected]>
ianstormtaylor · Aug 22, 2021 · 48b7129 · 48b7129
1 parent 3e7ff3b
commit 48b7129
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/.changeset/cold-beans-give.md b/.changeset/cold-beans-give.md
@@ -0,0 +1,6 @@
+---
+'slate-react': patch
+'slate': patch
+---
+
+Make onDomSelectionChange trigger after onClick.
diff --git a/packages/slate-react/src/components/editable.tsx b/packages/slate-react/src/components/editable.tsx
@@ -511,22 +511,30 @@ export const Editable = (props: EditableProps) => {
     [readOnly]
   )
 
+  const scheduleOnDOMSelectionChange = useCallback(
+    () => setTimeout(onDOMSelectionChange),
+    [onDOMSelectionChange]
+  )
+
   // Attach a native DOM event handler for `selectionchange`, because React's
   // built-in `onSelect` handler doesn't fire for all selection changes. It's a
   // leaky polyfill that only fires on keypresses or clicks. Instead, we want to
   // fire for any change to the selection inside the editor. (2019/11/04)
   // https://github.com/facebook/react/issues/5785
   useIsomorphicLayoutEffect(() => {
     const window = ReactEditor.getWindow(editor)
-    window.document.addEventListener('selectionchange', onDOMSelectionChange)
+    window.document.addEventListener(
+      'selectionchange',
+      scheduleOnDOMSelectionChange
+    )
 
     return () => {
       window.document.removeEventListener(
         'selectionchange',
-        onDOMSelectionChange
+        scheduleOnDOMSelectionChange
       )
     }
-  }, [onDOMSelectionChange])
+  }, [scheduleOnDOMSelectionChange])
 
   const decorations = decorate([editor, []])