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

This commit is contained in:
moklick
2025-05-15 11:57:54 +02:00
parent 7ab3cf4bb0
commit 8ce85fd8f0
2 changed files with 5 additions and 5 deletions
@@ -2,13 +2,12 @@ import { useEffect } from 'react';
import type { KeyCode } from '@xyflow/system'; import type { KeyCode } from '@xyflow/system';
import { useStoreApi } from '../hooks/useStore'; import { useStoreApi } from '../hooks/useStore';
import { useKeyPress, UseKeyPressOptions } from './useKeyPress'; import { useKeyPress } from './useKeyPress';
import { useReactFlow } from './useReactFlow'; import { useReactFlow } from './useReactFlow';
import { Edge, Node } from '../types'; import { Edge, Node } from '../types';
const selected = (item: Node | Edge) => item.selected; const selected = (item: Node | Edge) => item.selected;
const deleteKeyOptions: UseKeyPressOptions = { actInsideInputWithModifier: false };
const win = typeof window !== 'undefined' ? window : undefined; const win = typeof window !== 'undefined' ? window : undefined;
/** /**
@@ -26,7 +25,7 @@ export function useGlobalKeyHandler({
const store = useStoreApi(); const store = useStoreApi();
const { deleteElements } = useReactFlow(); const { deleteElements } = useReactFlow();
const deleteKeyPressed = useKeyPress(deleteKeyCode, deleteKeyOptions); const deleteKeyPressed = useKeyPress(deleteKeyCode, { actInsideInputWithModifier: false });
const multiSelectionKeyPressed = useKeyPress(multiSelectionKeyCode, { target: win }); const multiSelectionKeyPressed = useKeyPress(multiSelectionKeyCode, { target: win });
useEffect(() => { useEffect(() => {
+3 -2
View File
@@ -97,13 +97,14 @@ export function useKeyPress(
}, [keyCode]); }, [keyCode]);
useEffect(() => { useEffect(() => {
const target = options?.target || defaultDoc; const target = options?.target ?? defaultDoc;
const actInsideInputWithModifier = options?.actInsideInputWithModifier ?? true;
if (keyCode !== null) { if (keyCode !== null) {
const downHandler = (event: KeyboardEvent) => { const downHandler = (event: KeyboardEvent) => {
modifierPressed.current = event.ctrlKey || event.metaKey || event.shiftKey || event.altKey; modifierPressed.current = event.ctrlKey || event.metaKey || event.shiftKey || event.altKey;
const preventAction = const preventAction =
(!modifierPressed.current || (modifierPressed.current && !options.actInsideInputWithModifier)) && (!modifierPressed.current || (modifierPressed.current && !actInsideInputWithModifier)) &&
isInputDOMNode(event); isInputDOMNode(event);
if (preventAction) { if (preventAction) {