Keycode of delete still working when reactFlow is blur

[a1528zhang]

Describe the Bug

when reactflow is blur, press backspace still woring, but other keycodes not working such as up & down arrow

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. code is like
   `
   ...
   return (
   
   console.log("focus")} onBlur={() => console.log("blur")} ... />

);`
2. click reactflow panel print "focus", all keycodes are working
3. click div print "blur", all keycodes not working except backspace, node can be deleted

Expected behavior

when reactflow is blur, backspace should not working

Screenshots or Videos

20240508-170012.mp4

Platform

• OS: macOS
• Browser: Chrome
• Version: 11.11.3

Additional context

No response

[moklick]

It was meant to be a feature but I understand that it can be annoying. Currently all key event handlers are bound to window which could be changed to the wrapper. I will leave this open until we have a solution / decision for this.

[a1528zhang]

It was meant to be a feature but I understand that it can be annoying. Currently all key event handlers are bound to window which could be changed to the wrapper. I will leave this open until we have a solution / decision for this.

You mean "useKeyPress" hook? I use it In my app, such as :
const pressed = useKeyPress("Backspace", { target: "react-flow-ref"});
but I still can get Backspace key pressed when ReactFlow is blur.

what is the right way to use this hook?

[bcakmakoglu]

@a1528zhang target needs to be one of these target?: Window | Document | HTMLElement | ShadowRoot | null;

not just a string - it's not a query selector (if it was, the string you passed would still not be a valid query selector ^^)

[a1528zhang]

@bcakmakoglu Sure, my code actually is:
const rfRef = useRef(null); const pressed = useKeyPress("Backspace", { target: rfRef.current }); ... return <ReactFlow ref={rfRef} .../>
the problem is rfRef.current is null when component before mounted.

[bcakmakoglu]

Did you disable the delete key code on the ReactFlow component? <ReactFlow deleteKeyCode={null} ...>

[a1528zhang]

@bcakmakoglu Just try it, still not working

[bcakmakoglu]

What exactly isn't working? ^^

Your keycode listener? Disabling the delete key code should at least disable the removal of nodes initiated by ReactFlow - that much should work, yes?

[a1528zhang]

@bcakmakoglu Not working means: when I click element outof reactflow(that trigger onBlur callback), backspace still can delete selected node.

And yes, set deleteKeyCode = nullwill disable removal of nodes, but I can still trigger Backspace press event when reactflow is blur and useKeyPress is binding on reactflow ref. (I konw the time I use useKeyPress the rfRef.current is null, so useKeyPress may binding on window).

What confuses me is: when onBlur callback of reactflow triggered, some keyCode is disabled, like arrow button, but backspace is still working. Seems like backspace is different from othen keyCode

[bcakmakoglu]

The arrow keys don't use useKeyPress, they just an onKeyDown={handleKeyDown} handler directly to the node wrapper.

useKeyPress on the other hand, by default, binds to the window as Moritz previously explained, hence why it doesn't matter if the RF component is in focus or not.

Although your useKeyPress handler should work the way it's expected with the given bindings, at least that would be my expectation. Even if you pass null initially, if the keypress handler is re-run it should bind it to the correct element 🤔
Might be a bug ^^

[a1528zhang]

@bcakmakoglu Thanks for your explanation, waiting for your research result