Setting value to undefined or null does not clear input

[chrisgco]

The autocomplete component seems to be semi controlled. If I set value and onChange, and set value to null or undefined, I expected the AutocompleteInput.

[aysegulkavakli]

Same issue here +

[alvinoalvin]

Same issue, tried setting the restoreOnBlur property to false as well, but issue is still persisting

[cruzlutor]

I'm not sure if you guys are having the same issue I faced, but in my case, I fixed it in this way

...
const [value, setValue] = useState<string>('');
...
<AutoComplete
  multiple
  onChange={(vals) => console.log(vals)}
  // adding this
  onSelectOption={() => {
    setValue('');
  }}
  >
  <AutoCompleteInput
    // and adding these 2 properties also
    value={value}
    onChange={(event) => {
      setValue(event.target.value);
    }}
  >
    {({ tags }) =>
      tags.map((tag, tid) => (
        <AutoCompleteTag
          key={tid}
          label={tag.label}
          onRemove={tag.onRemove}
        />
      ))
    }
  </AutoCompleteInput>
  <AutoCompleteList>
    {countries.map((country, cid) => (
      <AutoCompleteItem
        key={`option-${cid}`}
        value={country}
        textTransform="capitalize"
        _selected={{ bg: 'whiteAlpha.50' }}
        _focus={{ bg: 'whiteAlpha.100' }}
      >
        {country}
      </AutoCompleteItem>
    ))}
  </AutoCompleteList>
</AutoComplete>

[simecek-m]

I think you need to use restoreOnBlurIfEmpty prop instead of restoreOnBlur.

https://github.com/anubra266/choc-autocomplete/blob/ea5110097238ce8f7bb7189f5753b0cdefaec97e/src/types.ts#L74

[iMro0t]

@simecek-m thanks. spent hours figuring out. but why it's set to true by default in first place?

[Kysluss]

It seems like this issue was fixed by using restoreOnBlurIfEmpty and potentially also by some other changes that have happened since the initial post was made. Doing some testing of my own, it seems the input is controllable in the manner you mention. If there's still an issue, would you be able to supply a codesandbox reproducing the issue?