Comments (10)
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.
from xyflow.
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?
from xyflow.
@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 ^^)
from xyflow.
@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.
from xyflow.
Did you disable the delete key code on the ReactFlow component? <ReactFlow deleteKeyCode={null} ...>
from xyflow.
@bcakmakoglu Just try it, still not working
from xyflow.
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?
from xyflow.
@bcakmakoglu Not working means: when I click element outof reactflow(that trigger onBlur callback), backspace still can delete selected node.
And yes, set deleteKeyCode = null
will 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
from xyflow.
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 ^^
from xyflow.
@bcakmakoglu Thanks for your explanation, waiting for your research result
from xyflow.
Related Issues (20)
- Rename `updateEdge` to `reconnectEdge` HOT 5
- Using Jest to click on handle throws "S?.elementFromPoint is not a function" error HOT 5
- when draggin a node it leave a trail
- [React Flow]: Couldn't create edge for target handle id HOT 1
- Uncaught TypeError: Cannot read properties of null (reading 'useRef') HOT 1
- No flow in sight since v11 migration HOT 8
- edge mouse enter and edge mouse leave not working HOT 4
- `addNodes` blocked by `setNodes` HOT 3
- my panel is displayed on the nodes HOT 4
- Can't create edges on react flow v12 HOT 2
- Check existing tests
- Connectionline props
- v11 nodes, edges are not displayed HOT 3
- reactflow start HOT 2
- Add provision to control speed of panning of canvas while dragging the nodes
- Flow with many lines makes dragging difficult HOT 3
- onlyRenderVisibleElements Data only appears in viewports HOT 1
- Edges unmount when nodes change HOT 1
- scrolling function, data selection outside of viewport HOT 1
- Add an initial status to connection to see if a connection is in progress
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from xyflow.