Is there an on focused option change event

[dtaub]

Hey, first of all obligatory thanks for all the work on this component.

I implemented a custom MenuList component in order to support virtual scrolling (using react-virtuoso). Something I noticed, however, is that when using the arrow keys to change the selected option in the menu, the menu no longer scrolls the selected option into view. This is understandable given the scrollable container is custom so I was trying to reimplement the behavior of scrolling the focused option into view, but I can't find any event or any way to know that.

I expected there would be some event for when the focused option changed but I don't see one. Digging through the code a bit, I don't see any event getting fired when the focused option changes either. Is there a way to listen for the focused option that I'm missing?

[ebonow]

Greetings @dtaub,

Given that this appears to be an implementation question and not a library issue, I will convert this to a discussion.

To answer your question, the focusedOption is now being returned to the MenuList component as a prop as of version 4.3.

Do you have a codesandbox that can be looked at for troubleshooting?

[JanderSilv]

Hey @dtaub, did you find out how do it?

[dtaub]

Hey @JanderSilv, the answer is pretty much what @ebonow said, I just never got around to trying it because I'm no longer working where I was at the time. But presumably you can watch the focusedOption in a useEffect and scroll accordingly.

The main blocker to doing it for us was we were on 3.x at the time and we couldn't do the major bump yet. If you're in the same situation then you'd probably need to upgrade, but if not, you should be able to use that prop.

[JanderSilv]

Sorry to bother you again, I'm really struggling with this.

The solution works partially, but the focusOption doesn't differentiate between mouse focus and keyboard focus. Which causes an auto-scroll in the list on hover it. I've tried to make it scroll if the event is provided by the ArrowUp or ArrowDown keys, but I haven't figured out where to attach the event listener.

Case: https://stackblitz.com/edit/react-ts-sxucwt?file=MenuList.tsx