Merge pull request #3934 from xyflow/escape-fix

disableKeyboardA11y now correctly prevents escape key presses

packages/react/src/components/EdgeWrapper/index.tsx

@@ -34,6 +34,7 @@ export function EdgeWrapper<EdgeType extends Edge = Edge>({
   edgeTypes,
   noPanClassName,
   onError,
+  disableKeyboardA11y,
 }: EdgeWrapperProps<EdgeType>): JSX.Element | null {
   let edge = useStore((s) => s.edgeLookup.get(id)!) as EdgeType;
   const defaultEdgeOptions = useStore((s) => s.defaultEdgeOptions);
@@ -160,7 +161,7 @@ export function EdgeWrapper<EdgeType extends Edge = Edge>({
     : undefined;
 
   const onKeyDown = (event: KeyboardEvent) => {
-    if (elementSelectionKeys.includes(event.key) && isSelectable) {
+    if (!disableKeyboardA11y && elementSelectionKeys.includes(event.key) && isSelectable) {
       const { unselectNodesAndEdges, addSelectedEdges } = store.getState();
       const unselect = event.key === 'Escape';
 

packages/react/src/components/NodeWrapper/index.tsx

@@ -174,7 +174,7 @@ export function NodeWrapper<NodeType extends Node>({
   };
 
   const onKeyDown = (event: KeyboardEvent) => {
-    if (isInputDOMNode(event.nativeEvent)) {
+    if (isInputDOMNode(event.nativeEvent) || disableKeyboardA11y) {
       return;
     }
 
@@ -187,12 +187,7 @@ export function NodeWrapper<NodeType extends Node>({
         unselect,
         nodeRef,
       });
-    } else if (
-      !disableKeyboardA11y &&
-      isDraggable &&
-      node.selected &&
-      Object.prototype.hasOwnProperty.call(arrowKeyDiffs, event.key)
-    ) {
+    } else if (isDraggable && node.selected && Object.prototype.hasOwnProperty.call(arrowKeyDiffs, event.key)) {
       store.setState({
         ariaLiveMessage: `Moved selected node ${event.key
           .replace('Arrow', '')

packages/react/src/container/EdgeRenderer/index.tsx

@@ -56,6 +56,7 @@ function EdgeRendererComponent<EdgeType extends Edge = Edge>({
   onEdgeDoubleClick,
   onEdgeUpdateStart,
   onEdgeUpdateEnd,
+  disableKeyboardA11y,
 }: EdgeRendererProps<EdgeType>) {
   const { edgesFocusable, edgesUpdatable, elementsSelectable, onError } = useStore(selector, shallow);
   const edgeIds = useVisibleEdgeIds(onlyRenderVisibleElements);
@@ -86,6 +87,7 @@ function EdgeRendererComponent<EdgeType extends Edge = Edge>({
             rfId={rfId}
             onError={onError}
             edgeTypes={edgeTypes}
+            disableKeyboardA11y={disableKeyboardA11y}
           />
         );
       })}

packages/react/src/types/edges.ts

@@ -83,6 +83,7 @@ export type EdgeWrapperProps<EdgeType extends Edge = Edge> = {
   rfId?: string;
   edgeTypes?: EdgeTypes;
   onError?: OnError;
+  disableKeyboardA11y?: boolean;
 };
 
 export type DefaultEdgeOptions = DefaultEdgeOptionsBase<Edge>;