Styling keyboard focus differently than mouse focus with useSelect?

[seanrcollings]

I'm trying to figure out how to style a select listbox differently when it's being navigated with keyboard vs when it's being navigated with the mouse.

CodeSandbox Link

In the above example I'm using the useFocusRing hook. I noticed that if you begin navigating with the keyboard, isFocusVisible is correctly set to true & the border styles are applied. However if you then start navigating with the mouse, isFocusVisible remains true and the border doesn't go away.

Does anyone know if there's an alternative solution that resolves this issue?

Thanks!

[snowystinger]

We don't know if you've bumped the mouse accidentally or are actually switching to interact with the mouse as your primary interaction method. So we opt to leave it in keyboard modality until a users actually clicks something.