headlessui

Files

T

Robin Malfait c92a84782f Improve Combobox types to improve false positives (#2411 )

* swap `Combobox` type order

If you use the default `Combobox` component then it defaults to
`Fragment`. This also means that if you provide an additional prop that
it would be forwarded to the `Fragment` but that won't work.

You do get a runtime error, but the types aren't 100% clear on what's
going on. In fact, they make it very confusing because it will use the
last "fallback" in all the `Combobox` definitions which marks the value
as "multiple".

Concretely, this means:
```ts
let [value, setValue] = useState('Tom Cook')

<Combobox
  value={value}
  onChange={setValue}
  placeholder="Hello!"
/>
```

Starts complaining about the `value` and `onChange` not handling the
`multiple` case correctly. But it should complain about the `placeholder`.

Switching the order _does_ solve this, but it is not the cleanest
solution.

Maybe we should be explicit about the `Fragment` case somehow.

However, there is a use case where I don't think TypeScript will be able
to help and it's a bit unfortunate.

```ts
let [value, setValue] = useState('Tom Cook')

<Combobox value={value} onChange={setValue} placeholder="Hello!">
   <div>
      {/* ... */}
   </div>
</Combobox>
```

This is valid because at runtime we will forward all the props to the
`div`. So not 100% sure what we should do here instead.

* update changelog

2023-04-03 17:46:20 +02:00