Comments (7)
Hi, I believe we had the similar problem. We had exactly the same use case. When controls are hidden, we pause the navigation. Then when we press any key, we show controls, and then resume navigation. But perhaps because the spatial navigation listener is on the "window" level, it might catch those key events before it was properly resumed.
We solved this with setting 0 timeout to only resume navigation on next animation frame, and not synchronously:
setTimeout(this.props.resumeSpatialNavigation, 0);
Sounds like a hack, but unfortunately didn't have more time to investigate it deeper. The library does not explicitly queue any events though. Perhaps this is due to event bubbling.
from react-spatial-navigation.
Glad I'm not imagining it and that it reproduces in another codebase.
I won't have any time to investigate it any time soon, either, unfortunately. Ideally we'd want to implement a solution that transparently handles the event in a sensible way.
from react-spatial-navigation.
I've investigated it a bit. React Spatial Navigation listens for key events on window
, while my app itself listens for key events on window.document
. When a key is pressed, the event deterministically reaches my app first, and the app can then cancel the event to prevent it from bubbling up to the window. So here's my setup:
window.document.addEventListener(
'keydown',
(keyEvent) => {
if(!spatialNavigation.paused){
/* Allow react-spatial-navigation to be the only handler of this keyEvent.
* The KeyEvent will bubble up to the window from here, where
* react-spatial-navigation will handle it. */
return;
}
// Take action based on the key event, then:
keyEvent.preventDefault();
keyEvent.stopPropagation();
// Now the keyEvent won't propagate onward to react-spatial-navigation.
spatialNavigation.resume();
}
);
from react-spatial-navigation.
@predikament any reason for keyEvent.stopPropagation();
preventing the event from propagation.
I want to know more about this one
from react-spatial-navigation.
Hello @jbbpatel94!
Bit confused if this question is to me, or if you meant to ask @shirakaba about his snippet above.
- Event API
stopPropagation
documentation - Some general documentation for how event ordering / bubbling works
If the question is why it is used in this library, it's to avoid side-effects and unintended default key event handling, as the intention for this library is to handle navigation.
from react-spatial-navigation.
it is preventing event from propagating to parent view.
from react-spatial-navigation.
it is preventing event from propagating to parent view.
This is correct, that is the intention.
I see you've also opened a PR (#74). I am going to close this question now since it's going a bit out of scope.
from react-spatial-navigation.
Related Issues (20)
- CSS gap:0 breaks navigation HOT 1
- Focus lost when Item Removed HOT 4
- Sometimes navigation doesn't work after go back to previous screen HOT 1
- a vulnerability CVE-2020-15168 is introduced in @noriginmedia/react-spatial-navigation HOT 2
- Focuses the second item in the list, after navigating from the fixed menu HOT 2
- Performance/Crash issue when load multiple rails and hold arrow keys to navigate HOT 1
- [Question]Can I use this package in a ReactJS project? HOT 4
- Focusable items hidden are able to be accessed. HOT 19
- withFocusable usage with forwardRef HOT 9
- Understanding of roadmap for library HOT 5
- more than 100 UI elements in funcational component taking too long to navigate. HOT 1
- 2-Directional Grid-type Items HOT 1
- display none control HOT 2
- Focus gets lost in case of collision HOT 3
- Track Child not recognizing children
- RTL is not supported
- Loss of focus when a component is rendered HOT 2
- Error when Server Side Rendering HOT 1
- Focusable elements not recognised when layout is position absolute HOT 5
- How should I handle focus when opening/closing a pop-up? HOT 3
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 react-spatial-navigation.