From b77fe9da1f80445dc23e7d2e788109cb2159a685 Mon Sep 17 00:00:00 2001 From: moklick Date: Tue, 13 Feb 2024 10:50:57 +0100 Subject: [PATCH 1/2] fix(deletion): do not delete node when user is inside input closes #3895 --- packages/react/src/hooks/useKeyPress.ts | 6 ++++++ .../src/lib/components/KeyHandler/KeyHandler.svelte | 10 +++++++++- packages/system/src/utils/dom.ts | 4 +--- 3 files changed, 16 insertions(+), 4 deletions(-) diff --git a/packages/react/src/hooks/useKeyPress.ts b/packages/react/src/hooks/useKeyPress.ts index 77966207..9f738d06 100644 --- a/packages/react/src/hooks/useKeyPress.ts +++ b/packages/react/src/hooks/useKeyPress.ts @@ -92,6 +92,12 @@ export function useKeyPress( } else { pressedKeys.current.delete(event[keyOrCode]); } + + // fix for Mac: when cmd key is pressed, keyup is not triggered for any other key, see: https://stackoverflow.com/questions/27380018/when-cmd-key-is-kept-pressed-keyup-is-not-triggered-for-any-other-key + if (event.key === 'Meta') { + pressedKeys.current.clear(); + } + modifierPressed.current = false; }; diff --git a/packages/svelte/src/lib/components/KeyHandler/KeyHandler.svelte b/packages/svelte/src/lib/components/KeyHandler/KeyHandler.svelte index f6697cb2..4c4f138e 100644 --- a/packages/svelte/src/lib/components/KeyHandler/KeyHandler.svelte +++ b/packages/svelte/src/lib/components/KeyHandler/KeyHandler.svelte @@ -113,7 +113,15 @@ { ...deleteKeyDefinition, enabled: deleteKeyDefinition.key !== null, - callback: (detail) => !isInputDOMNode(detail.originalEvent) && deleteKeyPressed.set(true) + callback: (detail) => { + const isModifierKey = + detail.originalEvent.ctrlKey || + detail.originalEvent.metaKey || + detail.originalEvent.shiftKey; + if (!isModifierKey && !isInputDOMNode(detail.originalEvent)) { + deleteKeyPressed.set(true); + } + } } ], type: 'keydown' diff --git a/packages/system/src/utils/dom.ts b/packages/system/src/utils/dom.ts index 3cf5cd61..9312bc07 100644 --- a/packages/system/src/utils/dom.ts +++ b/packages/system/src/utils/dom.ts @@ -37,11 +37,9 @@ export function isInputDOMNode(event: KeyboardEvent): boolean { // using composed path for handling shadow dom const target = (event.composedPath?.()?.[0] || event.target) as HTMLElement; const isInput = inputTags.includes(target?.nodeName) || target?.hasAttribute('contenteditable'); - // we want to be able to do a multi selection event if we are in an input field - 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 (isInput && !isModifierKey) || !!target?.closest('.nokey'); + return isInput || !!target?.closest('.nokey'); } export const isMouseEvent = (event: MouseEvent | TouchEvent): event is MouseEvent => 'clientX' in event; From 0d80b45d05940d059f041813291fa4c236419d34 Mon Sep 17 00:00:00 2001 From: moklick Date: Tue, 13 Feb 2024 10:52:11 +0100 Subject: [PATCH 2/2] chore(changelog): update --- packages/react/CHANGELOG.md | 1 + packages/svelte/CHANGELOG.md | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index 54c5f9ec..0308f87a 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -3,6 +3,7 @@ ## 12.0.0-next.9 - a better NodeResizer that works with subflows. Child nodes do not move when parent node gets resized and parent extent is taken into account +- don't delete node when input is focused and user presses Backspace + Ctrl (or any other mod key) ## 12.0.0-next.8 diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md index 123295bd..9349a2fc 100644 --- a/packages/svelte/CHANGELOG.md +++ b/packages/svelte/CHANGELOG.md @@ -7,6 +7,7 @@ - a better NodeResizer (child nodes do not move when parent node gets resized) - fix `on:panecontextmenu` - add `role="button"` to `` to prevent a11y warnings +- don't delete node when input is focused and user presses Backspace + Ctrl (or any other mod key) ## 0.0.35