Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Focus error in Dropdown
See original GitHub issueDescribe the bug
If, when navigating with Tab and several Dropdown components are located one after another, we get an error
Cannot read property 'contains' of null
To Reproduce
Steps to reproduce the behavior:
- Go to demo
- Focus on first Dropdown
- Keydown Tab
- See error
Reproducible Example
Minimal example by using CodeSandbox.
Expected behavior
On pressing Tab, focus just change to another component without error
Screenshots
Screenshots from sandbox https://i.imgur.com/cHdVnx0.png Screenshots from project https://i.imgur.com/UPS7Rsg.png
Environment (please complete the following information)
- Operating System: [Linux]
- Browser, Version Chrome
- React-Bootstrap Version [^1.6.0]
Additional context
Add any other context about the problem here.
Issue Analytics
- State:
- Created 2 years ago
- Comments:10 (3 by maintainers)
Top Results From Across the Web
javascript - Dropdown validation, focus method doesn't work
It executes the alert message, after that it moved to the next field. But it supposed to be sticked with that dropdown until...
Read more >Dropdown: TypeError: Cannot read property 'focus' of undefined
When you open an dropdown menu with custom dropdown items (div elements instead of buttons) the console is throwing the error Dropdown.js:147 ...
Read more >UI Explorer Element no longer exists Drop Down Closes when ...
The steps are to 'Indicate Element', F2, Click the Drop Down, wait for the timer to stop, Click the Element. This all works...
Read more >SetFocus function in Power Apps - Microsoft Learn
The SetFocus function gives a control the input focus. The user's keystrokes are then received by that control, allowing them to type into...
Read more >focus - Cypress Documentation
If you see this error, you may want to ensure that the main browser window is currently focused. This means not being focused...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Yes, that’s because
react-overlaysneeds to be updated to atleast5.1.0. I think next release should have it 👍@xkomiks
react-overlays5.1.0 includes the fix for this. Update the transitive dependency and you’re good to go 👍