alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/react/src/hooks/useGlobalKeyHandler.ts
View File

@@ -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(() => {

5
packages/react/src/hooks/useKeyPress.ts
View File

@@ -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) {