[Combobox] `onChange` type incorrectly determined

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v1.6.1

What browser are you using?

N/A

Reproduction URL

https://stackblitz.com/edit/react-ts-jldzdg?file=MyCombobox.tsx

Describe your issue

The Combobox component determined the type of the argument of the onChange function solely based on the type of the value property it receives. Unfortunately that is not accurate nor safe.

// 1. Nullable
<Combobox value={'hi'} onChange={(selection) => console.log("changed")} nullable={true} />

// Wrong type
type SelectionActual = string;
type SelectionExpected = string | null;

// 2. Multiple

/* 
Looking at the two cases below you cannot tell if there should be an error or not.
Maybe the option value is a `[string, string]`and maybe it's just a `string`.
Also, when `multiple & nullable = true` then `selection` cannot be null. So the type should reflect that.
*/

<Combobox value={['a', 'b']} onChange={(selection) => console.log("changed")} nullable={true} multiple={false} />
<Combobox value={['a', 'b']} onChange={(selection) => console.log("changed")} nullable={true} multiple={true} />

[JesusTheHun]

You are right, I didn’t add a tsconfig.json in the sandbox, and it works fine in strict mode 👌

[RobinMalfait]

Hey @JesusTheHun

I don’t think the Combobox is wrong in this case, the actual value has the wrong type. It is currently just string instead of string | null, and therefore the Combobox thinks it is just string as well.

I think this is because strict mode is set to false in your tsconfig.json. Once you set that to true you will see this:

Which results in the correct types.

Even if the type was just string, because of the nullable={true} prop, you will still get string | null in the onChange.

If you set nullable={false} it will be string instead of string | null.

But again, this requires "strict": true otherwise you will see the incorrect types again:

---

Forcing the generic type does not fix the issue.

I think once strict mode is on, that it will be solved.

Without strict mode	With strict mode