[React] `Combobox.Input` does not clear after removing the current value from the combobox.

[RodolfoSilva]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v1.5.0

What browser are you using?

Chrome

Reproduction URL

https://codesandbox.io/s/sad-wood-nl999t?file=/src/App.js

Describe your issue

After removing the current value from the combobox, the old value is still displayed in the Combobox.Input. Manually I am able to remove the input value, but doesn't work if the current value of the combobox is removed.

https://user-images.githubusercontent.com/1703020/156242995-a046964d-4394-47fd-add5-e70d7f25fa15.mov

[RobinMalfait]

Hey! Thank you for your bug report! Much appreciated! 🙏

This should be fixed by #1181, and will be available in the next release.

You can already try it using:

• npm install @headlessui/react@insiders or yarn add @headlessui/react@insiders.
• npm install @headlessui/vue@insiders or yarn add @headlessui/vue@insiders.

[RodolfoSilva]

Thanks @RobinMalfait

[jmdtc]

Hi @RobinMalfait, I tried the insiders version @headlessui/react": "^0.0.0-insiders.63383c4 and it's not working, even with the sandbox included in this example. Is there something I am missing?

[RobinMalfait]

We regressed on this issue, it does work if we set the value to null when clearing, but not when we set it to undefined.

• With undefined: https://codesandbox.io/s/goofy-sunset-m0bckf?file=/src/App.js
• With null: https://codesandbox.io/s/vigorous-rain-ogmgy3?file=/src/App.js

[thecrypticace]

To follow the way React itself does things we've added warnings when changing from undefined to another value. We suggest that you reset to null instead of undefined. You do not need to mark the combobox as nullable for this to work. This behavior already works in the latest, tagged version of Headless UI.

This new warnings were merged in #1878 and will be available in our insiders build in a few minutes. You can install and test it before we tag a release by using our insiders build: npm install @headlessui/react@insiders

Thanks! ✨

[nfiacco]

Do you have any recommendations for allowing null as a selectable option?

The reason I was using undefined was to specify "no option was selected" since null is a valid option in my use case.

[darkhorse07232020]

Hi, I have seen your bog report now. You can use nullable props of combobox.

[CollierKing]

<Combobox
    as="div"
    value={stateVal}
    onChange={setStateVal}
    nullable={true}
>