ComboBox with a tree like structure

[antoniodesousa]

Hi everyone, I'm trying to build a ComboBox with a tree like structure that the user can select or expand the item in the popover. I have spent 2 days on this already and I'm starting to think that's impossible to accomplish. First, I tried to style the ListBox to look like a tree object and it did look good until I wanted to make the chevrons clickable... the problem is that the ListBoxItem catches all the clickable events so the chevron button never gets the click event. I tried to put the button outside the ListBoxItem but that just breaks the ComboBox. I tried to use the beta Tree Aria Component but apparently it's not compatible with the ComboBox. At least, I couldn't make it work together. I tried to create my own custom list component and everything was working as I wanted but I can't change/set the selected item to the ComboBox. It looks like it has the selected item but when I try submit the form it's just empty.

If anyone has an idea on how I can accomplish this, I would be really grateful. Thanks.

[LFDanLu]

This kind of pattern is hopefully what we are aiming to support with a wrapping Autocomplete component in RAC which would support filtering any kind of collection within #7181 (at the moment only supports ListBox and Menu), though there are still some questions as to how exactly the grid/tree navigation will work. At the moment, the wrapping Autocomplete has very similar behavior to ComboBox (aka virtual focus) but allows for the use of other collection components other than just ListBox. For your case, is it more of a submenu like tree structure (aka items expand into a popover) or truly a tree like structure?

An alternative approach to the virtual focus would be to ditch the virtual focus and have the user tab between the input field and the wrapped collection, thus allowing for the tree to handle the grid navigation as is.

[antoniodesousa]

Yes, I'm looking to create a true tree like structure. Not a nested menu.

[LFDanLu]

In that case we are hoping #7181 will eventually cover grid collections like trees and will hopefully enable your use case.

[Pearce-Ropion]

@LFDanLu Is there any timeline for AutoComplete to support grid collections like GridList and Tree given that support for it was not included in #7181?

[LFDanLu]

No hard dates I can give unfortunately, but first we are focusing on supporting load states/async loading for many of the RAC components via #7938. After that I hope to pick up support for these grid collections in a Autocomplete.

I'm hoping it won't be too hard since we've discussed dropping the "virtual focus" behavior that currently exists for these grid collections when wrapped by a Autocomplete which will then greatly simplify the work, essentially allowing the current grid navigation behavior to work out of the box since the user would see real DOM focus move between the Autocomplete input and the wrapped grid collection via Tab. Then it would simply be the case of having the Autocomplete wrapper provide the proper filtering logic for a grid collection