diff --git a/packages/core/src/components/Nodes/wrapNode.tsx b/packages/core/src/components/Nodes/wrapNode.tsx index afb1f761..70b36ddb 100644 --- a/packages/core/src/components/Nodes/wrapNode.tsx +++ b/packages/core/src/components/Nodes/wrapNode.tsx @@ -8,7 +8,7 @@ import { ARIA_NODE_DESC_KEY } from '../A11yDescriptions'; import useDrag from '../../hooks/useDrag'; import useUpdateNodePositions from '../../hooks/useUpdateNodePositions'; import { getMouseHandler, handleNodeClick } from './utils'; -import { elementSelectionKeys } from '../../utils'; +import { elementSelectionKeys, isInputDOMNode } from '../../utils'; import type { NodeProps, WrapNodeProps, XYPosition } from '../../types'; export const arrowKeyDiffs: Record = { @@ -84,7 +84,12 @@ export default (NodeComponent: ComponentType) => { }; const onKeyDown = (event: KeyboardEvent) => { + if (isInputDOMNode(event)) { + return; + } + const { snapGrid, snapToGrid } = store.getState(); + if (elementSelectionKeys.includes(event.key) && isSelectable) { const unselect = event.key === 'Escape'; if (unselect) { diff --git a/packages/core/src/hooks/useKeyPress.ts b/packages/core/src/hooks/useKeyPress.ts index 4273feaa..20dcf37e 100644 --- a/packages/core/src/hooks/useKeyPress.ts +++ b/packages/core/src/hooks/useKeyPress.ts @@ -1,5 +1,6 @@ import { useState, useEffect, useRef, useMemo } from 'react'; +import { isInputDOMNode } from '../utils'; import type { KeyCode } from '../types'; type Keys = Array; @@ -106,14 +107,3 @@ function isMatchingKey(keyCodes: Array, pressedKeys: PressedKeys, isUp: bo function useKeyOrCode(eventCode: string, keysToWatch: KeyCode): KeyOrCode { return keysToWatch.includes(eventCode) ? 'code' : 'key'; } - -function isInputDOMNode(event: KeyboardEvent): boolean { - // using composed path for handling shadow dom - const target = (event.composedPath?.()[0] || event.target) as HTMLElement; - - return ( - ['INPUT', 'SELECT', 'TEXTAREA'].includes(target?.nodeName) || - target?.hasAttribute('contenteditable') || - !!target?.closest('.nokey') - ); -} diff --git a/packages/core/src/utils/index.ts b/packages/core/src/utils/index.ts index d869a81a..f6e9d994 100644 --- a/packages/core/src/utils/index.ts +++ b/packages/core/src/utils/index.ts @@ -1,3 +1,4 @@ +import type { KeyboardEvent as ReactKeyboardEvent } from 'react'; import type { Dimensions, Node, XYPosition, CoordinateExtent, Box, Rect } from '../types'; export const getDimensions = (node: HTMLDivElement): Dimensions => ({ @@ -69,3 +70,18 @@ export const devWarn = (message: string) => { console.warn(`[React Flow]: ${message}`); } }; + +const isReactKeyboardEvent = (event: KeyboardEvent | ReactKeyboardEvent): event is ReactKeyboardEvent => + 'nativeEvent' in event; + +export function isInputDOMNode(event: KeyboardEvent | ReactKeyboardEvent): boolean { + const kbEvent = isReactKeyboardEvent(event) ? event.nativeEvent : event; + // using composed path for handling shadow dom + const target = (kbEvent.composedPath?.()?.[0] || event.target) as HTMLElement; + + return ( + ['INPUT', 'SELECT', 'TEXTAREA'].includes(target?.nodeName) || + target?.hasAttribute('contenteditable') || + !!target?.closest('.nokey') + ); +}