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.