Combobox doesn't clear selection when input value is removed

[davidluhr]

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?
Any

Reproduction URL
https://stackblitz.com/edit/nextjs-rfh5ei?file=pages%2Findex.js

Describe your issue
The Combobox reverts to the previously selected option when the input's value is cleared and focus leaves (blurs) the input.

Steps to recreate with the above link:

1. Select the input text (defaults to "Durward Reynolds")
2. Delete the input text so the input is empty
3. Move focus elsewhere on the page (Tab or click outside)
4. Observe "Durward Reynolds" still appears as the actively selected option

This behavior is unexpected and does not allow the user to reset the Combobox to an unselected state.

Expected behavior
When the Combox input's value is empty, clear the selected option and do not show the <Combobox.Options>.

The WAI-ARIA Authoring Practices Combobox with Listbox popup examples demonstrate this interaction pattern: https://www.w3.org/TR/wai-aria-practices-1.1/examples/combobox/aria1.1pattern/listbox-combo.html

[RobinMalfait]

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

This is true that you now can never "clear" a value. However, we currently implemented the Combobox where you have to pick from a fixed list of options and accidentally clearing the text could result in data loss. However, I can see use cases where you you do want this feature and we implemented a feature for this in #1295 which gives you a nullable prop that allows you to do this.

Here is an updated StackBlitz, using the latest insiders build and the nullable prop: https://stackblitz.com/edit/nextjs-j5x2sa?file=pages/index.js

[davidluhr]

@RobinMalfait Thank you for this! Sorry for the unnecessary issue as I was unaware of the new nullable prop. I'll give this a go and appreciate this improvement.

[RobinMalfait]

No worries! It's an unreleased and undocumented feature so you couldn't know! 😅