ComboboxOptions render prop option has unknown type

[jussirantala]

What package within Headless UI are you using?

For example: @headlessui/react

What version of that package are you using?

For example: v2.1.0

Describe your issue

When using the render prop of ComboboxOptions for a virtualized list, the option property has unknown type.

[thecrypticace]

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 👍

[jussirantala]

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

typescript version 5.4.5

[jussirantala]

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

[thecrypticace]

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.

[thecrypticace]

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