alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(useKeyPress): return early if target is input #2000

Browse Source
This commit is contained in:
moklick
2022-04-02 12:12:37 +02:00
parent 8f871827f5
commit 1c699f889a
1 changed files with 11 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/hooks/useKeyPress.ts
+11 -9
View File
@@ -42,19 +42,25 @@ export default (keyCode: KeyCode | null = null, options: UseKeyPressOptions = {
useEffect(() => { useEffect(() => {
if (keyCode !== null) { if (keyCode !== null) {
const downHandler = (event: KeyboardEvent) => { const downHandler = (event: KeyboardEvent) => {
if (isInputDOMNode(event)) {
return false;
}
const keyOrCode = useKeyOrCode(event.code, keysToWatch); const keyOrCode = useKeyOrCode(event.code, keysToWatch);
pressedKeys.current.add(event[keyOrCode]); pressedKeys.current.add(event[keyOrCode]);
if (isMatchingKey(event, keyCodes, pressedKeys.current, false)) { if (isMatchingKey(keyCodes, pressedKeys.current, false)) {
event.preventDefault(); event.preventDefault();
setKeyPressed(true); setKeyPressed(true);
} }
}; };
const upHandler = (event: KeyboardEvent) => { const upHandler = (event: KeyboardEvent) => {
if (isInputDOMNode(event)) {
return false;
}
const keyOrCode = useKeyOrCode(event.code, keysToWatch); const keyOrCode = useKeyOrCode(event.code, keysToWatch);
if (isMatchingKey(event, keyCodes, pressedKeys.current, true)) { if (isMatchingKey(keyCodes, pressedKeys.current, true)) {
setKeyPressed(false); setKeyPressed(false);
pressedKeys.current.clear(); pressedKeys.current.clear();
} else { } else {
@@ -84,11 +90,7 @@ export default (keyCode: KeyCode | null = null, options: UseKeyPressOptions = {
// utils // utils
function isMatchingKey(event: KeyboardEvent, keyCodes: Array<Keys>, pressedKeys: PressedKeys, isUp: boolean): boolean { function isMatchingKey(keyCodes: Array<Keys>, pressedKeys: PressedKeys, isUp: boolean): boolean {
if (isInputDOMNode(event)) {
return false;
}
return ( return (
keyCodes keyCodes
// we only want to compare same sizes of keyCode definitions // we only want to compare same sizes of keyCode definitions
@@ -105,8 +107,8 @@ function useKeyOrCode(eventCode: string, keysToWatch: KeyCode): KeyOrCode {
return keysToWatch.includes(eventCode) ? 'code' : 'key'; return keysToWatch.includes(eventCode) ? 'code' : 'key';
} }
function isInputDOMNode(e: KeyboardEvent): boolean { function isInputDOMNode(event: KeyboardEvent): boolean {
const target = e?.target as HTMLElement; const target = event.target as HTMLElement;
return ['INPUT', 'SELECT', 'TEXTAREA'].includes(target?.nodeName) || target?.hasAttribute('contenteditable'); return ['INPUT', 'SELECT', 'TEXTAREA'].includes(target?.nodeName) || target?.hasAttribute('contenteditable');
} }