From 7e6f5be656bbf5297097d55b9f401587923e68c0 Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 13 Feb 2023 13:48:26 +0100 Subject: [PATCH 1/2] refactor(use-key-press): handle modifier keys + inputs --- packages/core/src/utils/index.ts | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) 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 = ( From 021f5a9210f47a968e50446cd2f9dae1f97880a4 Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 13 Feb 2023 13:49:54 +0100 Subject: [PATCH 2/2] chore(changeset): add --- .changeset/witty-eagles-type.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/witty-eagles-type.md 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