From e6e951297955e260e2526617a0eb9cb025943d78 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Tue, 4 Jul 2023 11:28:05 -0400
Subject: [PATCH] fix: Keyboard handlers should not be considered while
 composing

---
 app/components/ArrowKeyNavigation.tsx     | 4 ++++
 app/components/InputSearchPage.tsx        | 4 ++++
 app/components/SearchPopover.tsx          | 6 +++++-
 app/editor/components/SuggestionsMenu.tsx | 6 ++++++
 4 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/app/components/ArrowKeyNavigation.tsx b/app/components/ArrowKeyNavigation.tsx
index 02bb0d697..f0f3e3d5f 100644
--- a/app/components/ArrowKeyNavigation.tsx
+++ b/app/components/ArrowKeyNavigation.tsx
@@ -20,6 +20,10 @@ function ArrowKeyNavigation(
   const handleKeyDown = React.useCallback(
     (ev) => {
       if (onEscape) {
+        if (ev.nativeEvent.isComposing) {
+          return;
+        }
+
         if (ev.key === "Escape") {
           onEscape(ev);
         }
diff --git a/app/components/InputSearchPage.tsx b/app/components/InputSearchPage.tsx
index 35fe49540..0b0b28071 100644
--- a/app/components/InputSearchPage.tsx
+++ b/app/components/InputSearchPage.tsx
@@ -45,6 +45,10 @@ function InputSearchPage({
 
   const handleKeyDown = React.useCallback(
     (ev: React.KeyboardEvent<HTMLInputElement>) => {
+      if (ev.nativeEvent.isComposing) {
+        return;
+      }
+
       if (ev.key === "Enter") {
         ev.preventDefault();
         history.push(
diff --git a/app/components/SearchPopover.tsx b/app/components/SearchPopover.tsx
index c1eab3d42..928932a56 100644
--- a/app/components/SearchPopover.tsx
+++ b/app/components/SearchPopover.tsx
@@ -88,10 +88,14 @@ function SearchPopover({ shareId }: Props) {
 
   const handleSearchInputFocus = React.useCallback(() => {
     focusRef.current = searchInputRef.current;
-  }, []);
+  }, [searchInputRef]);
 
   const handleKeyDown = React.useCallback(
     (ev: React.KeyboardEvent<HTMLInputElement>) => {
+      if (ev.nativeEvent.isComposing) {
+        return;
+      }
+
       if (ev.key === "Enter") {
         if (searchResults) {
           popover.show();
diff --git a/app/editor/components/SuggestionsMenu.tsx b/app/editor/components/SuggestionsMenu.tsx
index a9ced29d9..3d6bc0b0a 100644
--- a/app/editor/components/SuggestionsMenu.tsx
+++ b/app/editor/components/SuggestionsMenu.tsx
@@ -260,6 +260,9 @@ function SuggestionsMenu<T extends MenuItem>(props: Props<T>) {
   const handleLinkInputKeydown = (
     event: React.KeyboardEvent<HTMLInputElement>
   ) => {
+    if (event.nativeEvent.isComposing) {
+      return;
+    }
     if (!props.isActive) {
       return;
     }
@@ -441,6 +444,9 @@ function SuggestionsMenu<T extends MenuItem>(props: Props<T>) {
     };
 
     const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.isComposing) {
+        return;
+      }
       if (!props.isActive) {
         return;
       }