Comments (7)
Must be some pretty strange race condition where the async tasks are getting backed up behind the callbacks that should remove them.
Are you able to confirm that the
document.removeEventListener()
function is being called before thedocument.addEventListener()
function?
Mmmm, I was able to confirm that the event listeners are sticking around and in some cases multiple of them are getting added, which would seem to passively suggest that, but I'll try to create a more concrete evidence.
from react-accessible-dropdown-menu-hook.
@WesCossick this appears to be related to the changes we made here 7c9a583
What's happening is the handleEveryClick
click handler is being added multiple times without being removed, and firing when the button should be opening the menu leading to the menu being automatically closed. If you make the code synchronous you can't reproduce the bug.
This issue can be reproduced without the virtual escape button, just hold the physical escape button and spam click the menu button while doing so and it's pretty reliably reproduced... I suspect the key makes it easier to reproduce by triggering the item listener and the button listener at the same time, forcing the useEffect adding and removing the handleEveryClick
function to fire more rapidly.
Must be some pretty strange race condition where the async tasks are getting backed up behind the callbacks that should remove them.
Thoughts about fixes? Maybe we could try something using closures to let each instance of the handleEveryClick
function know if it was supposed to be removed at this point.
from react-accessible-dropdown-menu-hook.
Must be some pretty strange race condition where the async tasks are getting backed up behind the callbacks that should remove them.
Are you able to confirm that the document.removeEventListener()
function is being called before the document.addEventListener()
function?
from react-accessible-dropdown-menu-hook.
An example where they were called in the wrong order:
Compared to the normal behavior:
from react-accessible-dropdown-menu-hook.
Hmm, this might be a little hacky, but maybe we could remember whether an event listener has already been removed and not add it in the async code if so? Whatever value we store would need to be stored inside a property of an object, so that the arrow functions kept the reference to the object and not a copy of the value at the point when the function was defined...
from react-accessible-dropdown-menu-hook.
Hmm, this might be a little hacky, but maybe we could remember whether an event listener has already been removed and not add it in the async code if so? Whatever value we store would need to be stored inside a property of an object, so that the arrow functions kept the reference to the object and not a copy of the value at the point when the function was defined...
Something like this was also all I thought of.
from react-accessible-dropdown-menu-hook.
Can you give it a try and see if it works?
from react-accessible-dropdown-menu-hook.
Related Issues (20)
- Some suggestions HOT 9
- First menu item only receives focus if menu is opened via keyboard controls HOT 1
- Support closing menu with escape key while the menu button has focus HOT 1
- Add option to choose whether to focus first item on click
- MenuItems as Link of React Router HOT 1
- Reduce number of variables documented in some cases
- subMenu support? HOT 2
- Add support for submenus HOT 1
- How to use this hook in complex codebases HOT 3
- React Native support HOT 2
- Typescript errors when using buttons in dropdown HOT 2
- Usage of deprecated method HOT 2
- Resizing elements broken on phone
- Difference to downshift? HOT 1
- Can't use moveFocus to focus on the currently selected option HOT 3
- Hovering over "Get started" button hides text HOT 1
- Change instances of `user.type` to `user.keyboard`
- Rework focus on click behavior HOT 5
- Update documentation
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-accessible-dropdown-menu-hook.