Merge pull request #3905 from xyflow/fix/deletion-focused-input

Fix/deletion focused input

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
 

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/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 `<EdgeLabel />` 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
 

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;