Ensure ComboboxInput does not sync while you are still typing

[RobinMalfait]

This PR fixes an issue where the ComboboxInput would sync the value based on the displayValue way too early and losing the value you just typed.

Previously, we didn't sync the value when you are still typing in the input. If you stopped typing for a bit, then we marked that you are not typing anymore and synced the input again.

The issue with this is that if you are waiting for a network request after searching then the Combobox thinks you are done with typing (because you are physically not typing anymore). Due to re-renders triggered by API calls finishing triggering state changes, we would sync the input again because at that point the isTyping is set to false. This resulted in losing your search query and re-syncing the input.

To solve this, we don't rely on a delay to indicate whether you are done typing or not. Instead, we lifted the state up and the moment you start typing we mark that you are typing. We only mark as "not typing" when you:

1. Go to a specific option (using your arrow keys)
2. Close the Combobox component
   1. By choosing an option in single value mode
   2. By pressing escape (resets to previous value)
   3. By clicking outside (resets to previous value)
   4. Or pressing Tab and blurring the ComboboxInput

Fixes: #3184

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
headlessui-react	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 31, 2024 8:42pm
headlessui-vue	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 31, 2024 8:42pm

[thecrypticace]

I'm a little sad that we have to hoist this state but am happy it's less code :D