mirror/slate
1
0
Fork 0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-08-16 20:24:01 +02:00
Code Issues Releases Wiki Activity

Ignore selectionchange events originating from <input> and <textarea> elements (#5795)

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

* Linter fixes
This commit is contained in:
Joe Anderson
2025-01-20 15:08:46 +00:00
committed by GitHub
parent 6aace0d017
commit f456dfbf13
2 changed files with 20 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/empty-pillows-exercise.md Normal file
View File

@@ -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)

20
packages/slate-react/src/components/editable.tsx
View File

@@ -856,15 +856,25 @@ export const Editable = forwardRef(
useIsomorphicLayoutEffect(() => { useIsomorphicLayoutEffect(() => {
const window = ReactEditor.getWindow(editor) 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 // Attach a native DOM event handler for `selectionchange`, because React's
// built-in `onSelect` handler doesn't fire for all selection changes. It'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 // a leaky polyfill that only fires on keypresses or clicks. Instead, we
// want to fire for any change to the selection inside the editor. // want to fire for any change to the selection inside the editor.
// (2019/11/04) https://github.com/facebook/react/issues/5785 // (2019/11/04) https://github.com/facebook/react/issues/5785
window.document.addEventListener( window.document.addEventListener('selectionchange', onSelectionChange)
'selectionchange',
scheduleOnDOMSelectionChange
)
// Listen for dragend and drop globally. In Firefox, if a drop handler // Listen for dragend and drop globally. In Firefox, if a drop handler
// initiates an operation that causes the originally dragged element to // initiates an operation that causes the originally dragged element to
@@ -878,7 +888,7 @@ export const Editable = forwardRef(
return () => { return () => {
window.document.removeEventListener( window.document.removeEventListener(
'selectionchange', 'selectionchange',
scheduleOnDOMSelectionChange onSelectionChange
) )
window.document.removeEventListener('dragend', stoppedDragging) window.document.removeEventListener('dragend', stoppedDragging)
window.document.removeEventListener('drop', stoppedDragging) window.document.removeEventListener('drop', stoppedDragging)