Comments (5)
Hi,
The third parameter should be optional? At least according to MDN. Not sure why it throws an exception in this case.
But perhaps you can add this if this is an issue. Just maybe to name it like "keyListenerOptions", because from the init
method prospective it's not clear which listeners is it related to (even though it's only keys).
from react-spatial-navigation.
For old browsers, the third parameter is required. If the addEventListener
and removeEventListener
(sometimes) don't have the third parameter, a browser throws an exception.
from react-spatial-navigation.
@alfimois If we're going to provide keyListenerOptions
for the sake of backwards compatibility, it shouldn't strictly be implemented as a boolean (that would better be called keyListenerUseCapture
). It would be better to implement it as an options object (for the sake of newer browsers) that falls back to boolean if necessary (for older browsers):
In older versions of the DOM specification, the third parameter of
addEventListener()
was a Boolean value indicating whether or not to use capture. Over time, it became clear that more options were needed. Rather than adding more parameters to the function (complicating things enormously when dealing with optional values), the third parameter was changed to an object which can contain various properties defining the values of options to configure the process of removing the event listener.Because older browsers (as well as some not-too-old browsers) still assume the third parameter is a Boolean, you need to build your code to handle this scenario intelligently. You can do this by using feature detection for each of the options you're interested in.
I don't know what the default (backwards-compatible) options for each property on a keyListenerOptions
object would be, however 😕
from react-spatial-navigation.
@alfimois Nonetheless, in case you need it, I've created a branch from v2.9.2 that implements keyListenerUseCapture
: https://github.com/shirakaba/react-spatial-navigation/tree/shirakaba/listener-use-capture. I won't be maintaining this branch to keep it up-to-date with upstream updates, however.
You can install it with:
npm install --save "git+ssh://[email protected]:shirakaba/react-spatial-navigation.git#shirakaba/listener-use-capture"
# or with yarn:
yarn add "git+ssh://[email protected]:shirakaba/react-spatial-navigation.git#shirakaba/listener-use-capture"
from react-spatial-navigation.
Oh, thanks:D
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.