Moved to handling keyboard shortcuts on the document body

Also removed shortcut text input checking to map interaction component

src/components/Modal.js

@@ -30,20 +30,14 @@ function StyledModal({
       }}
       {...props}
     >
-      {/* Stop keyboard events when modal is open to prevent shortcuts from triggering */}
+      {children}
-      <div
+      {allowClose && (
-        onKeyDown={(e) => e.stopPropagation()}
+        <Close
-        onKeyUp={(e) => e.stopPropagation()}
+          m={0}
-      >
+          sx={{ position: "absolute", top: 0, right: 0 }}
-        {children}
+          onClick={onRequestClose}
-        {allowClose && (
+        />
-          <Close
+      )}
-            m={0}
-            sx={{ position: "absolute", top: 0, right: 0 }}
-            onClick={onRequestClose}
-          />
-        )}
-      </div>
     </Modal>
   );
 }

src/components/map/MapInteraction.js

@@ -197,45 +197,85 @@ function MapInteraction({
     stageHeightRef.current = height;
   }
 
-  function handleKeyDown(event) {
+  // Added key events to interaction emitter
-    // Change to pan tool when pressing space
+  useEffect(() => {
-    if (event.key === " " && selectedToolId === "pan") {
+    function handleKeyDown(event) {
-      // Stop active state on pan icon from being selected
+      // Ignore text input
-      event.preventDefault();
+      if (event.target instanceof HTMLInputElement) {
-    }
+        return;
-    if (
+      }
-      event.key === " " &&
+      interactionEmitter.emit("keyDown", event);
-      selectedToolId !== "pan" &&
-      !disabledControls.includes("pan")
-    ) {
-      event.preventDefault();
-      previousSelectedToolRef.current = selectedToolId;
-      onSelectedToolChange("pan");
     }
 
-    // Basic keyboard shortcuts
+    function handleKeyUp(event) {
-    if (event.key === "w" && !disabledControls.includes("pan")) {
+      // Ignore text input
-      onSelectedToolChange("pan");
+      if (event.target instanceof HTMLInputElement) {
-    }
+        return;
-    if (event.key === "d" && !disabledControls.includes("drawing")) {
+      }
-      onSelectedToolChange("drawing");
+      interactionEmitter.emit("keyUp", event);
-    }
-    if (event.key === "f" && !disabledControls.includes("fog")) {
-      onSelectedToolChange("fog");
-    }
-    if (event.key === "m" && !disabledControls.includes("measure")) {
-      onSelectedToolChange("measure");
     }
 
-    interactionEmitter.emit("keyDown", event);
+    document.body.addEventListener("keydown", handleKeyDown);
-  }
+    document.body.addEventListener("keyup", handleKeyUp);
+    document.body.tabIndex = 1;
+    return () => {
+      document.body.removeEventListener("keydown", handleKeyDown);
+      document.body.removeEventListener("keyup", handleKeyUp);
+      document.body.tabIndex = 0;
+    };
+  }, [interactionEmitter]);
 
-  function handleKeyUp(event) {
+  // Create default keyboard shortcuts
-    if (event.key === " " && selectedToolId === "pan") {
+  useEffect(() => {
-      onSelectedToolChange(previousSelectedToolRef.current);
+    function handleKeyDown(event) {
+      // Change to pan tool when pressing space
+      if (event.key === " " && selectedToolId === "pan") {
+        // Stop active state on pan icon from being selected
+        event.preventDefault();
+      }
+      if (
+        event.key === " " &&
+        selectedToolId !== "pan" &&
+        !disabledControls.includes("pan")
+      ) {
+        event.preventDefault();
+        previousSelectedToolRef.current = selectedToolId;
+        onSelectedToolChange("pan");
+      }
+
+      // Basic keyboard shortcuts
+      if (event.key === "w" && !disabledControls.includes("pan")) {
+        onSelectedToolChange("pan");
+      }
+      if (event.key === "d" && !disabledControls.includes("drawing")) {
+        onSelectedToolChange("drawing");
+      }
+      if (event.key === "f" && !disabledControls.includes("fog")) {
+        onSelectedToolChange("fog");
+      }
+      if (event.key === "m" && !disabledControls.includes("measure")) {
+        onSelectedToolChange("measure");
+      }
     }
-    interactionEmitter.emit("keyUp", event);
+
-  }
+    function handleKeyUp(event) {
+      if (event.key === " " && selectedToolId === "pan") {
+        onSelectedToolChange(previousSelectedToolRef.current);
+      }
+    }
+
+    interactionEmitter.on("keyDown", handleKeyDown);
+    interactionEmitter.on("keyUp", handleKeyUp);
+    return () => {
+      interactionEmitter.off("keyDown", handleKeyDown);
+      interactionEmitter.off("keyUp", handleKeyUp);
+    };
+  }, [
+    interactionEmitter,
+    onSelectedToolChange,
+    disabledControls,
+    selectedToolId,
+  ]);
 
   function getCursorForTool(tool) {
     switch (tool) {
@@ -284,9 +324,6 @@ function MapInteraction({
       ref={containerRef}
       {...bind()}
       className="map"
-      tabIndex={1}
-      onKeyDown={handleKeyDown}
-      onKeyUp={handleKeyUp}
     >
       <ReactResizeDetector handleWidth handleHeight onResize={handleResize}>
         <Stage

src/components/map/MapMenu.js

@@ -79,13 +79,7 @@ function MapMenu({
       }}
       contentRef={handleModalContent}
     >
-      {/* Stop keyboard events when modal is open to prevent shortcuts from triggering */}
+      {children}
-      <div
-        onKeyDown={(e) => e.stopPropagation()}
-        onKeyUp={(e) => e.stopPropagation()}
-      >
-        {children}
-      </div>
     </Modal>
   );
 }