Support for cascading comboboxes?

[jpalma-savvy]

I wanted to use the combobox for cascading combobox lists (select first combobox, it changes the list in the second combobox). I have it almost working through stimulus by changing the source of the second combobox when the first one changes:

handleTypeSelected(event) {
        let selectedValue = event.detail.value
        this.subTypeComboBoxTarget.dataset.hwComboboxAsyncSrcValue = `/my_url?type=${selectedValue}`
}

This works, but only if I click the second combobox twice to refresh it. Once refreshed, it uses the new source url, and has the correct, updated list.

The problem is you have to click twice for it to refresh, and if you already have something selected, it would need to clear the current selection when the new list is set.

Is there a way to accomplish this currently?

Thanks so much!

[josefarias]

Hey @jpalma-savvy, good question!

I'd just replace the affected combobox as a whole with a turbo stream. That way you'll always have a blank slate, regardless of any future changes to the library.

So I'd wrap the first combobox in an autosubmitting form (or a stimulus controller if you don't want many forms) and have that perform a turbo stream request to the server, which will then know to replace the second combobox altogether with the right config. And so on until you reach the last combobox.

Recall that the html spec doesn't allow nested forms. Just mentioning it because it's a common gotcha and it should inform how you structure your markup and your choice for using forms or stimulus controllers.

[jpalma-savvy]

Thank you @josefarias, makes sense, sounds great!