Missing options when using nullable and the escape key

[lharress]

What package within Headless UI are you using?

@headlessui/react - Combobox

What version of that package are you using?

1.7.14

What browser are you using?

Chrome

Reproduction URL

Describe your issue

When using nullable the input field seems to remember the last query when you type a few characters then press escape.

• Clear the input field
• Type anything into the search input then hit ESC
• Move your focus away from the input and back again.

Result

• There are no options until you press the first character

Expected

• Focus has been returned to the input, display suggestions based on

Not actually 100% sure if this expected behaviour is correct, but thought I'd raise a ticket to see what others thought.

[tsabolov]

I got the same issue. It could be easily checked at the TailwindUI playground - https://tailwindui.com/components/application-ui/navigation/command-palettes.
Any ideas how to circumvent this?

[ivan-kleshnin]

Another, possibly related, bug is that nullable does not handle Ctrl/Cmd-X properly. Last input simply reappears after being removed. Only the Backspace consistently cleans the vlaue.

[RobinMalfait]

Hey, thank you for this bug report! 🙏

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

You can already try it using:

• npm install @headlessui/react@insiders.
• npm install @headlessui/vue@insiders.

I've updated the CodeSandbox with the latest insiders version: https://codesandbox.io/s/sharp-forest-sp5q6p?file=/src/App.js. I had to make an adjusted where the query is also reset in the onChange of the Combobox itself. This is necessary in case you press escape and we clear everything out. When this happens onChange will be called with null, but the native change event in the Combobox.Input would not fire because the input was changed programmatically instead of by typing in the browser.

Another thing you will notice is that the list won't show once you focus in again, this is because the combobox was closed when pressing escape. However, opening the combobox and using your arrow keys should show all the options because now we properly reset the query value as well.

You will also notice that the bug reported by @ivan-kleshnin is fixed. Right now it doesn't matter how the input is cleared, if it is cleared then the onChange will be called with null when using the nullable prop.

Thanks!