Merge pull request #5263 from xyflow/fix/multiselect-input-focus

fix(react): multi select works when input is focused

.changeset/big-crabs-grin.md

@@ -0,0 +1,5 @@
+---
+'@xyflow/react': patch
+---
+
+Multi select key works when input is focused

packages/react/src/hooks/useGlobalKeyHandler.ts

@@ -2,13 +2,12 @@ import { useEffect } from 'react';
 import type { KeyCode } from '@xyflow/system';
 
 import { useStoreApi } from '../hooks/useStore';
-import { useKeyPress, UseKeyPressOptions } from './useKeyPress';
+import { useKeyPress } from './useKeyPress';
 import { useReactFlow } from './useReactFlow';
 import { Edge, Node } from '../types';
 
 const selected = (item: Node | Edge) => item.selected;
 
-const deleteKeyOptions: UseKeyPressOptions = { actInsideInputWithModifier: false };
 const win = typeof window !== 'undefined' ? window : undefined;
 
 /**
@@ -26,7 +25,7 @@ export function useGlobalKeyHandler({
   const store = useStoreApi();
   const { deleteElements } = useReactFlow();
 
-  const deleteKeyPressed = useKeyPress(deleteKeyCode, deleteKeyOptions);
+  const deleteKeyPressed = useKeyPress(deleteKeyCode, { actInsideInputWithModifier: false });
   const multiSelectionKeyPressed = useKeyPress(multiSelectionKeyCode, { target: win });
 
   useEffect(() => {

packages/react/src/hooks/useKeyPress.ts

@@ -97,13 +97,14 @@ export function useKeyPress(
   }, [keyCode]);
 
   useEffect(() => {
-    const target = options?.target || defaultDoc;
+    const target = options?.target ?? defaultDoc;
+    const actInsideInputWithModifier = options?.actInsideInputWithModifier ?? true;
 
     if (keyCode !== null) {
       const downHandler = (event: KeyboardEvent) => {
         modifierPressed.current = event.ctrlKey || event.metaKey || event.shiftKey || event.altKey;
         const preventAction =
-          (!modifierPressed.current || (modifierPressed.current && !options.actInsideInputWithModifier)) &&
+          (!modifierPressed.current || (modifierPressed.current && !actInsideInputWithModifier)) &&
           isInputDOMNode(event);
 
         if (preventAction) {