fix(deletion): do not delete node when user is inside input closes #3895

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;
       };
 

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'

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;