Combobox with disabled options

[mattcullenmeyer]

Hello 👋

I'm using the Combobox component with the disabledItems prop to disable options that have already been selected by a user previously. It works as expected if an items hasn't been selected yet. However, the dropdown no longer works once an item is selected. Is this expected behavior?

<Combobox
  items={selectedEventNames}
  labelText="Select event"
  hideVisibleLabel={true}
  selectedItem={eventName}
  onSelectedItemChange={item => onSelectEvent(item.selectedItem)}
  placeholder="Select event"
  disabledItems={disabledEvents}
/>

https://paste.twilio.design/components/combobox#combobox-with-disabled-options

[dosubot[bot]]

🤖

Hello @mattcullenmeyer! 👋

I'm Dosu, a friendly bot here to lend a hand while we wait for a human maintainer. I'm here to help you debug issues, answer questions, and guide you on your journey as a contributor. Let's work together to keep the gears of this project running smoothly! 😊

Based on the information I found in the Paste repository, it's not expected behavior for the Combobox component's dropdown to stop working once an item is selected. The disabledItems prop is used to disable specific options in the dropdown, but it should not affect the functionality of the dropdown itself.

Here's an example from the Paste repository where the disabledItems prop is used:

export const ComboboxDisabledItems: StoryFn = () => {
  return (
    <Combobox
      items={items}
      labelText="Choose a component:"
      helpText="This is the help text"
      initialSelectedItem={items[2]}
      disabledItems={[items[1]]}
    />
  );
};

In this example, the second item in the items array is disabled, but the dropdown should still function normally, allowing the user to select any of the other items.

I also found two similar issues in the repository, but they were more about the support for disabled options in the Combobox component, not about the dropdown stopping to work after an item is selected. You can check them out here: disabled option for combobox and Combobox with disabled options without building combobox from scratch?.

If the dropdown is not working as expected, it might be due to a bug or an issue with the implementation. Could you provide more details about the issue? For example, are there any error messages in the console? Also, could you share more about the selectedEventNames and disabledEvents props? This information could help us understand the issue better.

-Dosu

Sources

• disabled option for combobox
• Combobox with disabled options without building combobox from scratch?
• packages/paste-core/components/combobox/stories/Combobox.stories.tsx

---

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.

[serifluous]

Hey @mattcullenmeyer ! Can you provide a Codesandbox with a reproduction?

When you say "the dropdown no longer works", do you mean a list doesn't show up when you click on it?

[SiTaggart]

I might also ask for clarification on the interaction too. If you are disabling items when you select them, how do you unselect items?

[nkrantz]

Hi @mattcullenmeyer - do you still need help on this discussion or did you get it sorted out?

[serifluous]

Marking as answered due to inactivity. Feel free to reply if you need support still!