Unset isComposing on keydown with isCompsing false (#4979)

ianstormtaylor · Apr 30, 2022 · 6afa9f6 · 6afa9f6
1 parent d8da50f
commit 6afa9f6
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 7 deletions.
diff --git a/.changeset/breezy-lizards-impress.md b/.changeset/breezy-lizards-impress.md
@@ -0,0 +1,5 @@
+---
+'slate-react': patch
+---
+
+Unset isComposing on keydown with isCompsing false
diff --git a/packages/slate-react/src/components/editable.tsx b/packages/slate-react/src/components/editable.tsx
@@ -1090,15 +1090,25 @@ export const Editable = (props: EditableProps) => {
           )}
           onKeyDown={useCallback(
             (event: React.KeyboardEvent<HTMLDivElement>) => {
-              if (
-                !readOnly &&
-                hasEditableTarget(editor, event.target) &&
-                !isEventHandled(event, attributes.onKeyDown) &&
-                !state.isComposing
-              ) {
+              if (!readOnly && hasEditableTarget(editor, event.target)) {
                 const { nativeEvent } = event
-                const { selection } = editor
 
+                // COMPAT: The composition end event isn't fired reliably in all browsers,
+                // so we sometimes might end up stuck in a composition state even though we
+                // aren't composing any more.
+                if (state.isComposing && nativeEvent.isComposing === false) {
+                  state.isComposing = false
+                  setIsComposing(false)
+                }
+
+                if (
+                  isEventHandled(event, attributes.onKeyDown) ||
+                  state.isComposing
+                ) {
+                  return
+                }
+
+                const { selection } = editor
                 const element =
                   editor.children[
                     selection !== null ? selection.focus.path[0] : 0