Controlling MultiselectCombobox and object items

[dremin]

Hi! I'd like to use MultiselectCombobox to replace some places where we are using another library. Unfortunately, I've run into a couple issues replicating current functionality:

• The form the MultiselectCombobox is within has the ability to be reset. However, I am not having success using the useCombobox hook to control the MultiselectCombobox via the reset action. Is this supported? If not, is there another way to control MultiselectCombobox like Combobox so that it can be reset programmatically?
• When working with Combobox, I usually set items to be an array of objects with various properties, and use itemToString to set the display string. With MultiselectCombobox, whenever the items array is not a simple array of strings, React throws an error. I can work around this with an assumption that my item display labels are unique, but I'm wondering if I am doing something wrong or if this is unsupported.

Thanks!

[gloriliale]

Hi @dremin! Could you provide us a CodeSandbox reproducing these two issues? It'll help us figure out what's going on more accurately. Feel free to fork off this one if that helps!

[dremin]

@gloriliale Sure, here you go: https://codesandbox.io/s/cool-currying-1dzejo?file=/src/index.tsx

[shleewhite]

Hey @dremin !

1. Because multi-select combobox is so complex, we made the decision to not support controlling the component with the useComboboxHook. However, we will fix the types so this is clear and create a prop that lets you reset the selectedItems.
2. For the items as objects issue, you need to also pass the optionTemplate prop. The itemToString prop is used for visually hidden screen reader announcements and how the item is displayed in the pills. The optionTemplate prop controls how the item is displayed in the listbox. Here is a fork of your sandbox: https://codesandbox.io/s/magical-stitch-4ylw83?file=/src/index.tsx

I will follow up on this thread when the PR is ready!

[shleewhite]

@dremin quick update:

I opened a ticket you can track for the ability to reset the multiselect combobox: https://issues.corp.twilio.com/browse/DSYS-3647

The types fix is in this PR: #2782

[dremin]

Hi, following up since it has been a while and it doesn't appear that either of the previous responders are with Twilio any more. Are there still plans to address this? If so, where on the roadmap does this fall?

[SiTaggart]

Hi @dremin

It remains a backlog item, but based on having to weigh up a whole bunch of other requests and a ~60% reduction in team size, we can't give timelines for something like this I'm afraid.

Happy to take contributions if it's a massive blocker.

Thanks for understanding.

[SiTaggart]

Hi @dremin

Multi select combobox can now be fully controlled by the consumer via inversion of control and using the provided hooks. Documentation can be found here https://paste.twilio.design/components/multiselect-combobox#usemultiselectcombobox-state-hook

[dremin]

Hi @dremin

Multi select combobox can now be fully controlled by the consumer via inversion of control and using the provided hooks. Documentation can be found here https://paste.twilio.design/components/multiselect-combobox#usemultiselectcombobox-state-hook

Yay, thanks!!