Combobox on close event with highlighted item

[batusai513]

Hi, I'm testing a few user interaction patterns for the useComboBox hook, I wanted to know if there is any way to know the highlighted value when blurring the menu while an item is highlighted. if there is no native way, is this something that can be done userland?

Thanks in advance for any information.

[snowystinger]

Just to make sure I understand what you're asking for.
You want to open a combobox, arrow key down to an item, then hit Tab and have that value be selected?

I don't think we want to do that. See Aria patterns for comboboxes linked from our docs hook page https://www.w3.org/WAI/ARIA/apg/patterns/combobox/
Enter is what will commit the selected value.

If I misunderstood the goal, please let me know.

[batusai513]

@snowystinger What I am asking is, user open the combobox, user arrow key down and highlight an item, user clicks outside or press TAB or escape key, an event is triggered with the data of the state previous to close (highlighted index, selected value if any, etc).

[snowystinger]

Thanks for clarifying!

If you're using the hooks, you should be able to do it in the ListBox component
https://react-spectrum.adobe.com/react-aria/useComboBox.html#listbox
Just add some events (hover/focus) onto the items that return the key/id

As for putting focus there when the combobox reopens, that's much harder, as focus is managed in a much lower down hook. So you'd need to rewrite a few to get at it. We've had some conversations about exposing the focus, but there hasn't been a good way to do it yet nor a strong need for it.

One thing to consider is that it's a field that you're meant to type in, as soon as you do that, the focus and the data set shrinks. And if the menu wasn't open yet, you might be trying to focus something that doesn't exist anymore. The main purpose of this component is that you can rapidly narrow down the list of options by typing into the field.

You could also consider not using a combobox for this at all and use a textfield as a filter for a dataset below using a ListView. That would remember even if you unmounted it if you used selection mode single because focus should go to the first selected item. You can verify that here https://react-spectrum.adobe.com/react-aria/useGridList.html#single-selection This will work even if the data is reduced by filtering.