Description
Provide a general summary of the issue here
When upgrading from 1.6.0 to 1.7.0+, useFocusWithin
hook is behaving differently when wrapping a ComboBox
.
Previously, onBlurWithin
callback was not triggered when mousing over items within the ComboBox's Listbox
, but in 1.7.0 the callback fires.
What's really weird is it almost seems to correlate with the speed that you move your mouse. If you slowly move your mouse around the screen, the onBlurWithin
callback usually will not be triggered, but moving your mouse faster is more likely to trigger this callback.
All the while, the actually focused element according to document.activeElement
never changes. I'm assuming this is because the hook is looking at synthetic focus events.
🤔 Expected Behavior?
onBlurWithin
callback should not be called when hovering items in a Listbox.
😯 Current Behavior
onBlurWithin
callback is called when hovering items in a Listbox.
💁 Possible Solution
No response
🔦 Context
The reason I'm using the hook is because I have an AG Grid cell editor component that includes mutiple ComboBoxes. In order to support keyboard control between each ComboBox, I am suppressing keyboard events from being handled by the grid (e.g. so tabbing doesn't tab out of the cell editor, and instead focuses the next ComboBox), and managing them myself my watching the onBlurWithin
call when the entire cell editor container is blurred out of.
🖥️ Steps to Reproduce
https://codesandbox.io/p/sandbox/stupefied-platform-t2fn2r
Version
1.7.0
What browsers are you seeing the problem on?
Chrome
If other, please specify.
No response
What operating system are you using?
Mac OS
🧢 Your Company/Team
No response
🕷 Tracking Issue
No response