`ComboboxOptions` render prop `option` has unknown type about headlessui HOT 5 CLOSED

I think we're aiming to tag a release today — but if not then tomorrow. 👍

In the meantime you can use our insiders build once it's updated (may take a few minutes):

npm install @headlessui/react@insiders

from headlessui.

Hey! So this is a known limitation of TypeScript in how it interprets JSX. Children in JSX/TSX can't be "typesafe" and as a result are not able to infer their types, props, etc… based on the parent component.

Matt Pocock has an article about this topic that details some of the problems. But the gist is that we'd need to find a way to design the types such that the "children" of Combobox are only of a certain type — this would then allow us to infer the props type. Sadly this is just not possible today.

This is why the type in the render prop is typed as unknown — to push people to type it themselves. I'd suggest typing it explicitly like this:

<HeadlessComboboxOptions>
  {({ option } : { option: MyOptionType }) => (
    <HeadlessComboboxOption>…</HeadlessComboboxOption>
  )}
</HeadlessComboboxOptions>

Hope that helps 👍

from headlessui.

@thecrypticace I actually tried to type it myself but I get this:

typescript version 5.4.5

from headlessui.

If the type was any instead of unknown, I think it would work.

from headlessui.

I swear worked at one point but yeah aliasing to a different type does not in function argument position. Will get a fixed merged in for that.

from headlessui.