diff --git a/.changeset/witty-eagles-type.md b/.changeset/witty-eagles-type.md new file mode 100644 index 00000000..36b86d8f --- /dev/null +++ b/.changeset/witty-eagles-type.md @@ -0,0 +1,5 @@ +--- +'@reactflow/core': patch +--- + +refactor: use key press handle modifier keys + input diff --git a/packages/core/src/utils/index.ts b/packages/core/src/utils/index.ts index f1021bfb..2d801d05 100644 --- a/packages/core/src/utils/index.ts +++ b/packages/core/src/utils/index.ts @@ -103,17 +103,12 @@ export function isInputDOMNode(event: KeyboardEvent | ReactKeyboardEvent): boole // using composed path for handling shadow dom const target = (kbEvent.composedPath?.()?.[0] || event.target) as HTMLElement; + const isInput = ['INPUT', 'SELECT', 'TEXTAREA'].includes(target?.nodeName) || target?.hasAttribute('contenteditable'); // we want to be able to do a multi selection event if we are in an input field - if (event.ctrlKey || event.metaKey || event.shiftKey) { - return false; - } + const isModifierKey = event.ctrlKey || event.metaKey || event.shiftKey; // when an input field is focused we don't want to trigger deletion or movement of nodes - return ( - ['INPUT', 'SELECT', 'TEXTAREA'].includes(target?.nodeName) || - target?.hasAttribute('contenteditable') || - !!target?.closest('.nokey') - ); + return (isInput && !isModifierKey) || !!target?.closest('.nokey'); } export const isMouseEvent = (