Moved to handling keyboard shortcuts on the document body

Also removed shortcut text input checking to map interaction component

src/components/Modal.js

@@ -29,11 +29,6 @@ function StyledModal({
         },
       }}
       {...props}
-    >
-      {/* Stop keyboard events when modal is open to prevent shortcuts from triggering */}
-      <div
-        onKeyDown={(e) => e.stopPropagation()}
-        onKeyUp={(e) => e.stopPropagation()}
     >
       {children}
       {allowClose && (
@@ -43,7 +38,6 @@ function StyledModal({
           onClick={onRequestClose}
         />
       )}
-      </div>
     </Modal>
   );
 }

src/components/map/MapInteraction.js

@@ -197,6 +197,36 @@ function MapInteraction({
     stageHeightRef.current = height;
   }
 
+  // Added key events to interaction emitter
+  useEffect(() => {
+    function handleKeyDown(event) {
+      // Ignore text input
+      if (event.target instanceof HTMLInputElement) {
+        return;
+      }
+      interactionEmitter.emit("keyDown", event);
+    }
+
+    function handleKeyUp(event) {
+      // Ignore text input
+      if (event.target instanceof HTMLInputElement) {
+        return;
+      }
+      interactionEmitter.emit("keyUp", 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]);
+
+  // Create default keyboard shortcuts
+  useEffect(() => {
     function handleKeyDown(event) {
       // Change to pan tool when pressing space
       if (event.key === " " && selectedToolId === "pan") {
@@ -226,17 +256,27 @@ function MapInteraction({
       if (event.key === "m" && !disabledControls.includes("measure")) {
         onSelectedToolChange("measure");
       }
-
-    interactionEmitter.emit("keyDown", event);
     }
 
     function handleKeyUp(event) {
       if (event.key === " " && selectedToolId === "pan") {
         onSelectedToolChange(previousSelectedToolRef.current);
       }
-    interactionEmitter.emit("keyUp", event);
     }
 
+    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) {
       case "pan":
@@ -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

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