From f456dfbf133f93fabe683849adb7952b8b04fc60 Mon Sep 17 00:00:00 2001
From: Joe Anderson <joe@mousetrapped.co.uk>
Date: Mon, 20 Jan 2025 15:08:46 +0000
Subject: [PATCH] Ignore `selectionchange` events originating from `<input>`
 and `<textarea>` elements (#5795)

* Ignore `selectionchange` events originating from `<input>` and `<textarea>` elements

* Linter fixes
---
 .changeset/empty-pillows-exercise.md          |  5 +++++
 .../slate-react/src/components/editable.tsx   | 20 ++++++++++++++-----
 2 files changed, 20 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/empty-pillows-exercise.md

diff --git a/.changeset/empty-pillows-exercise.md b/.changeset/empty-pillows-exercise.md
new file mode 100644
index 000000000..23cf04afd
--- /dev/null
+++ b/.changeset/empty-pillows-exercise.md
@@ -0,0 +1,5 @@
+---
+'slate-react': patch
+---
+
+Ignore selectionchange events originating from input and textarea elements (addresses Chrome bug https://issues.chromium.org/issues/389368412)
diff --git a/packages/slate-react/src/components/editable.tsx b/packages/slate-react/src/components/editable.tsx
index 24a426a6a..1503b7e40 100644
--- a/packages/slate-react/src/components/editable.tsx
+++ b/packages/slate-react/src/components/editable.tsx
@@ -856,15 +856,25 @@ export const Editable = forwardRef(
     useIsomorphicLayoutEffect(() => {
       const window = ReactEditor.getWindow(editor)
 
+      // COMPAT: In Chrome, `selectionchange` events can fire when <input> and
+      // <textarea> elements are appended to the DOM, causing
+      // `editor.selection` to be overwritten in some circumstances.
+      // (2025/01/16) https://issues.chromium.org/issues/389368412
+      const onSelectionChange = ({ target }: Event) => {
+        const targetElement = target instanceof HTMLElement ? target : null
+        const targetTagName = targetElement?.tagName
+        if (targetTagName === 'INPUT' || targetTagName === 'TEXTAREA') {
+          return
+        }
+        scheduleOnDOMSelectionChange()
+      }
+
       // 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
-      window.document.addEventListener(
-        'selectionchange',
-        scheduleOnDOMSelectionChange
-      )
+      window.document.addEventListener('selectionchange', onSelectionChange)
 
       // Listen for dragend and drop globally. In Firefox, if a drop handler
       // initiates an operation that causes the originally dragged element to
@@ -878,7 +888,7 @@ export const Editable = forwardRef(
       return () => {
         window.document.removeEventListener(
           'selectionchange',
-          scheduleOnDOMSelectionChange
+          onSelectionChange
         )
         window.document.removeEventListener('dragend', stoppedDragging)
         window.document.removeEventListener('drop', stoppedDragging)