How to run actions when an option gets highlighted in ComboBox?

[selrond]

Essentially the title.
I want to perform some item-specific actions when the user highlights (focuses or hovers) an item inside ComboBox.
I’ve read the docs, but couldn’t come up with a reasonably straightforward solution.

[reidbarber]

For React Aria, we currently support isFocused in the render props for ListBoxItem, but we would need to add onFocus/onBlur/onFocusChange handlers to ListBoxItem to get this. This seems reasonable to me, feel free to create an issue for more discussion.

For React Spectrum, we don't have individual focus handlers on any collection items, and I don't think that is something we'll support based on how collection items work now.

[snowystinger]

Out of curiosity, what kinds of things are you trying to run on these interactions. We may have other suggestions.

[selrond]

@snowystinger I want to show some content inside the popover under the options, based on the option that's highlighted.

Specifically - I'm building a JSON Picker, where I show keys as options, and their values as a preview.

I'd be grateful for any suggestions on how to go about it using react aria (ComboBox, useComboBox or something alike)

[snowystinger]

Some quick followup questions and a suggestion, how does a non-visual person "see" the examples (using voiceover or talkback etc)? Or how does a touch user preview the values?

This sounds very nice for mouse and keyboard sighted users.

Maybe it'd make more sense to create a popover with a listbox that has single selection on it and a selection behavior of replace, and a panel next to it/below it which shows the preview and then cap it all off with a "confirm" or "submit" button.

You could filter the listbox with a textfield as well.

This way the popover won't close before users have a chance to visit and view the preview.

[selrond]

Thanks for the suggestion! It's a bit weird that being able to attach event listeners on highlight is not possible and one has to basically reassemble the combobox themselves. I still wonder if there's no other, more straightforward way…