Combobox's onChange type is incorrectly derived

[Yankovsky]

What package within Headless UI are you using?

For example: @headlessui/react

What version of that package are you using?

For example: 1.6.6

Reproduction URL

https://stackblitz.com/edit/react-ts-f9leum?file=App.tsx

Describe your issue

Types are incorrectly derived for the Combobox component. onChange parameter and value are considered to be of the same type, but it is not the case in my example:

• Combobox's onChange parameter is an Item
• Combobox's value is a string
• Combobox.Option's value is an Item

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

You are mixing types here, the value for each option is Item, but the value of the Combobox is a string (search) those are not compatible. You either have to make each Combobox.Option of type string or make the type of the Combobox of type Item instead of type string.

This is not only a TypeScript issue but also a runtime issue. If you want to make things a bit easier than I recommend you to read this comment: #1650 (comment)

[Yankovsky]

@RobinMalfait Thank you for the response and thank you for the great library!

What I wanted to achieve here is a controlled component with value of type string, which internally works with objects (onChange and Option). I want to set the Combobox value from the outside. Actually, despite TS errors, it works right now https://stackblitz.com/edit/react-ts-yfbjur?file=App.tsx

I'll just use strings everywhere, it is more code but also a more robust solution.