Moving mouse over `ComboBox` items triggers `onBlurWithin` in 1.7.0
- Dominant language
- TypeScript
- Stars
- 15.9k
- Forks
- 1.6k
- Avg merge
- 3d 9m
- Merged PRs (30d)
- 59
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_
Contributor guide
Assessment
This issue has not been assessed yet.