Combobox not able to clear value when used as controlled component

[jhdielman]

Hi folks! Running into an issue where setting the inputValue to undefined or '' doesn't clear the value. Using the example below I was using the Combobox as a way to search a set of selections. Another implementation of this was to use as a way to select filters from a list or also define our own (hence using a combobox). When reseting those filters we want to set the value to '' or undefined. Unfortunately, this didn't seem to clear the value.

const selections = [
  {label: 'Item 1', value: '1'},
  {label: 'Item 2', value: '2'},
  {label: 'Item 3', value: '3'},
];

const ControlledCombobox = () => {
  const [value, setValue] = React.useState('');
  const [items, setItems] = React.useState(selections);
  const [selectedItems, setSelectedItems] = React.useState([]);

  return (
    <>
      <Combobox
        autocomplete
        items={items}
        labelText="Make a selection"
        itemToString={item => (item ? String(item.label) : null)}
        onInputValueChange={({inputValue}) => {
          if (inputValue !== undefined) {
            setItems(selections.filter(item => {
              return item.label.toLowerCase().startsWith(inputValue.toLowerCase())
            }));
            setValue(inputValue);
          }
        }}
        onSelectedItemChange={changes => {
          setSelectedItems([...selectedItems, changes.selectedItem]);
          setValue('');
        }}
        inputValue={value}
      />
     <ul>
         {selectedItems.map(item => (<li>{item.label}</li>));
     </ul>
    </>
  );
};

[SiTaggart]

Hi @jhdielman, we're taking a look into it and get back to you.

I can offer a little reasoning as to why we had to stop allowing value though, and it may connect to the issue you are experiencing.

Because of the way the combobox works where the selected item can be a string or object, and where the input can act as a filter to the options, it acts differently to a normal HTML element. Whereas a normal HTML element the value you get from it is the programmatic value and the visually displayed value, the combobox "value" (or selected item) isn't necessarily the same as the visually displayed value of the input. They are independent from each other up to a certain point (more on that in a second).

The fact we allowed value as a prop originally was more of an oversight than anything, because value as a name in the context of a combobox is reasonably misleading.

Where it gets interesting though is when the visual input value and the selected value stop being independent. When you select an item a combobox is then supposed to visually reflect what was selected, so InputValue and selectedValue become explicitly tied together. You can't clear the inputValue anymore because the Combobox has a selecteditem. You have to clear the selectedItem to reset the inputValue. And I think that maybe where the bug is.

But we'll investigate next week

[corinne-nagel]

Hey @SiTaggart! Any update to this?

[SiTaggart]

Not yet, still working on a plan. The chances are we'll just allow the component consumer to pass in the state object as an override by using the hook provided by downshift. But I'm still figuring out the details.

[jhdielman]

Many thanks for looking into this @SiTaggart :). I do want to mention that I did also implement a useState hook to set and "clear" the selected item as well. I tried both and empty string and undefined and still ended up with the same result. I see below there's a potential fix which is awesome 😄 .

[SiTaggart]

OK, I have a potential fix for this. The only way to successfully reset both the input value and selected item is for the consumer to use the hook that we use underneath and use the set methods selectItem or reset.

By doing so we'll need to provide a way to pass state to the combobox, much like we do else where in the system like in tabs, for example.

I'll try and push a fix up this week

[jhdielman]

That's great news 😄 . Thank you so much for looking into this. Very much appreciated @SiTaggart.

[SiTaggart]

Curious if this makes sense @jhdielman https://paste-git-fix-comboboxstate-reducer.twilio-dsys.vercel.app/components/combobox#usecombobox-state-hook

[SiTaggart]

Guidelines on how to do this is now live on the site and the package should be headed to NPM right about now. https://paste.twilio.design/components/combobox/#usecombobox-state-hook