Nested dropdown

[pguptaDS]

Hi! We had a team discussion and realized that we might have a problem with the way we've designed the "Scope selection" dropdown in the RBAC designs as shown here.

Turns out the Scope dropdown is hard to implement. To populate the list as shown in the designs, we will have to make numerous API calls, slowing the UI in case an org. has several accounts (because we need to make a separate call for each account to check whether it has subs). One option the team presented was nested drop down (for which there is no Paste component as far we know), from an implementation POV this will help greatly because we can make the second/third/fourth API call only if a user clicks on an account vs. loading all this data at once.

Please advise on how we can best solve this problem.

[SiTaggart]

So the problem with the suggestion by the team is that the component referenced is a Menu, and not a form form control.

A menu performs an action https://paste.twilio.design/components/menu#performing-actions. It doesn't persist or set a value.

Because you are wanting to set a selected value inside a form, you must use a form control, of which a Combobox is one. It allows you to select and set a value to be persisted.

This is analogous to pre JavaScript days, old school web pages. You want to save the value selected by the user, to do so you would place html inputs inside a form element. Upon submitting the form you would save the values from the inputs. A Menu can't do this. It doesn't submit form data.

If API calls are the technical constraint you need to work within, you might need to explore the option that came up a while ago in Office Hours. That was dependent Comboboxes. Selecting an account in the first combobox, changes the data presented in the next Combobox.

Right now, there is no accessible way to do hierarchical data in a single form input. There will be in the future, but these draft specs need wide spread browser and assistive technology support before we will implement them.