Make the Combobox component nullable by default

[RobinMalfait]

This PR makes the Combobox nullable by default, this means that it's possible to receive a null value in the onChange callback. The types have been updated to tell that the onChange can receive null. Note: this is only in single value mode.

This PR also improves the behaviour of the component in general.

• If you remove all the text from the ComboboxInput, you will receive a null value in the onChange callback.

• If you click outside of the Combobox, the Combobox will close and then a few things can happen:

  1. The Combobox didn't have a value, so it will remain empty.
  2. The Combobox had a value, so it will keep that value that was previously selected.

  It will not select the currently active value (active means the visually selected value without being selected in the Combobox state itself).

  Think of it as a "cancel" action.

• If you press Escape, the Combobox will close and the same rules as above will apply. Think of it as a "cancel" action.

• If you press <tab>, the Combobox will close but this time the active value will be selected.

This PR also improves the underlying types, and uses the new TypeScript 5.4 NoInfer<T> feature. This way we can cleanup some complex types and make the code more readable.

This is a breaking change, but you can apply the following changes to your component:

Scenario #1: If you were already using nullable:

In this scenario, you should be able to just drop the nullable prop. We currently still have it in the TypeScript types because it doesn't hurt, it just won't do anything since it's the default now.

  <Combobox
    value={value}
    onChange={setValue}
-   nullable
  >
    <Combobox.Input onChange={(e) => setQuery(e.target.value)} />
    <Combobox.Options>
      <Combobox.Option value="a">Option A</Combobox.Option>
      <Combobox.Option value="b">Option B</Combobox.Option>
      <Combobox.Option value="c">Option C</Combobox.Option>
    </Combobox.Options>
  </Combobox>

Scenario #2: If you explicitly don't want it to be nullable:

In this case, you can check the value in the onChange, and apply the necessary logic that you want. You could set the value to some specific (fallback) value, you can abort a form submission, anything that fits your current domain logic.

  <Combobox
    value={value}
-   onChange={setValue}
+   onChange={(value) => {
+     if (value === null) {
+       setValue(defaultSelectedValue)
+     } else {
+       setValue(value)
+     }
+   }}
  >
    <Combobox.Input onChange={(e) => setQuery(e.target.value)} />
    <Combobox.Options>
      <Combobox.Option value="a">Option A</Combobox.Option>
      <Combobox.Option value="b">Option B</Combobox.Option>
      <Combobox.Option value="c">Option C</Combobox.Option>
    </Combobox.Options>
  </Combobox>

[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	Mar 29, 2024 2:15pm
headlessui-vue	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 29, 2024 2:15pm

[thecrypticace]

Looks good in general — just a small note about the tests.

[sentiasa]

Hi @RobinMalfait. Is this change coming to vue as well?