From b77fe9da1f80445dc23e7d2e788109cb2159a685 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Tue, 13 Feb 2024 10:50:57 +0100
Subject: [PATCH] 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;