Confirm Delete

In production-grade editors, accidentally pressing Delete or Backspace and losing a complex cluster of nodes can be catastrophic. By default, Flow includes built-in keyboard listeners for immediate deletion. To implement a confirmation dialog (or any interception logic), you can disable the default shortcuts and take control of the deletion flow yourself.

Intersection & Confirmation Demo

Select one or more nodes below and press the Delete key on your keyboard. Observe how the system intercepts the action and prompts for confirmation before proceeding with the removal.

Select elements on the canvas to enable deletion

Node 1

Node 2

Node 3

Safe Deletion Workflow

Implementation Strategy

1. Disable Internal Handling: Pass :keyboard-shortcuts="false" to the <yh-flow> component. This prevents the engine from automatically handling Delete, Backspace, Ctrl+C, etc.
2. Top-Level Interception: Wrap the flow component in a container with @keydown listeners to capture the specific keys you want to intercept. Ensure the container is focusable (e.g., using tabindex="0").
3. Filtered Mutation: After verifying the user's intent (e.g., via a Modal), simply filter your nodes and edges arrays to remove the selected IDs. Reactivity takes care of the rest.