Combobox with disabled options without building combobox from scratch?

[productdana]

Hi! I'm trying to use the Paste Combobox with some dropdown options disabled. Is it possible to achieve that with just the Combobox component or would I need to do it similarly to this and build out everything like in this example? https://paste.twilio.design/primitives/combobox-primitive

The options I'm trying to disable would be "Loading..." & "No results found." (trying to make it an async combobox and update the options with a prefix search)

I've tried using getItemProps from useCombobox and passing it into optionsTemplate but it looks like it doesn't disable the options there (and I'm also getting an error about missing props).

const state = useCombobox({...

<Combobox
        state={state}
        items={inputItems}
        autocomplete
        labelText="Account"
        helpText={errorMessage}
        hasError={Boolean(errorMessage)}
        optionTemplate={(item: ModifiedAccountItem) => {
          return (
            <div
              {...state.getItemProps({
                item,
                disabled: item.username === 'subuser',
              })}
            >
              {item.username} {item.isParent && parentIndicator}
            </div>
          );
        }}

Thanks in advance for your help!

[SiTaggart]

Hi @productdana

In this instance you don't need a disabled state for listbox options for those two specific use cases. The reason being is that you need to be able to communicate those two states to users who use assistive technology such as screen readers.

When something is disabled it is non-interactive. You can't focus on it, you can't select it, it's effectively removed from the DOM. As such you can't communicate to assistive technology these states of loading, or empty. They must remain enabled for me to get to them.

Generally speaking because of the disabled logic, there isn't much of a concept of disabled options in a combobox. If you can't get to them, and you can't select them, you should ideally just remove them from the list.

Hope that helps

[productdana]

Hi @SiTaggart

That makes sense why we shouldn't disable the loading/empty states. How should we handle these interactions? If we show a loading or no results option and a user clicks/selects it, should we display loading/empty in the input value just like any other selected value?

Thanks!

[SiTaggart]

Potentially do absolutely nothing. I only need to know the information you are providing me, loading or empty.

If I action it, I think it's fine to just preventDefault and do nothing.

[productdana]

Ok sounds good, thanks Simon!