fix DOM selection can not be updated when use composition input on Sa…

…fari #3196 (#3698) * fix DOM selection can not be updated when use composition input on Safari #3196 * Update editable.tsx * Create dry-deers-applaud.md Co-authored-by: Ian Storm Taylor <[email protected]>
ianstormtaylor · Mar 31, 2021 · bf83f33 · bf83f33
1 parent 6799dfd
commit bf83f33
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 0 deletions.
diff --git a/.changeset/dry-deers-applaud.md b/.changeset/dry-deers-applaud.md
@@ -0,0 +1,5 @@
+---
+'slate-react': patch
+---
+
+Fixed selection updating with IME inputs in browsers that support `beforeinput`.
diff --git a/packages/slate-react/src/components/editable.tsx b/packages/slate-react/src/components/editable.tsx
@@ -372,6 +372,15 @@ export const Editable = (props: EditableProps) => {
           case 'insertFromYank':
           case 'insertReplacementText':
           case 'insertText': {
+            if (type === 'insertFromComposition') {
+              // COMPAT: in Safari, `compositionend` is dispatched after the
+              // `beforeinput` for "insertFromComposition". But if we wait for it
+              // then we will abort because we're still composing and the selection
+              // won't be updated properly.
+              // https://www.w3.org/TR/input-events-2/
+              state.isComposing = false
+            }
+
             const window = ReactEditor.getWindow(editor)
             if (data instanceof window.DataTransfer) {
               ReactEditor.insertData(editor, data as DataTransfer)