Fixes a bug in which certain keypresses would be prevented when perfo…

…rmed outside the pop-up. They only need to be prevented while the form is open.
coddingtonbear · Feb 12, 2024 · d840769 · d840769
1 parent c838b7f
commit d840769
Showing 1 changed file with 24 additions and 11 deletions.
diff --git a/src/popup.tsx b/src/popup.tsx
@@ -100,17 +100,6 @@ if (!document.getElementById(ROOT_CONTAINER_ID)) {
     },
   };
 
-  function preventBrowserFromStealingKeypress(event: KeyboardEvent) {
-    if (event.code !== "Escape") {
-      event.stopPropagation();
-    }
-  }
-  document.addEventListener(
-    "keydown",
-    preventBrowserFromStealingKeypress,
-    true
-  );
-
   interface Props {
     sandbox: HTMLIFrameElement;
   }
@@ -406,10 +395,34 @@ if (!document.getElementById(ROOT_CONTAINER_ID)) {
     const [previewContext, setPreviewContext] =
       React.useState<Record<string, any>>();
 
+    function preventBrowserFromStealingKeypress(event: KeyboardEvent) {
+      if (event.code !== "Escape") {
+        event.stopPropagation();
+      }
+    }
+
     useEffect(() => {
       if (popupFormDisplayed) {
         updatePreviewContext();
+        document.addEventListener(
+          "keydown",
+          preventBrowserFromStealingKeypress,
+          true
+        );
+      } else {
+        document.removeEventListener(
+          "keydown",
+          preventBrowserFromStealingKeypress,
+          true
+        );
       }
+      return () => {
+        document.removeEventListener(
+          "keydown",
+          preventBrowserFromStealingKeypress,
+          true
+        );
+      };
     }, [popupFormDisplayed]);
 
     async function updatePreviewContext(): Promise<void> {