Disabled and onClick prop does not exist in Listbox.Button

[Oskii2311]

What package within Headless UI are you using?
@headlessui/react

What version of that package are you using?

1.7.12

Describe your issue

After updating headless to version 1.7.12 from 1.7.11 typescript starts throwing errors about disable and onClick props in Listbox.Button. In the previous version everything worked as expected. After the version downgrade the code works.

[RobinMalfait]

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

Can you please attach a minimal reproduction repo that shows the issue?

Can't seem to reproduce this: https://codesandbox.io/s/suspicious-pine-8lqnlo?file=/src/App.tsx:768-810

[Oskii2311]

Hi,
example: https://codesandbox.io/s/frosty-glade-yvc4j4?file=/src/App.tsx:0-951

[RobinMalfait]

I see, we did make some changes to our TypeScript types to make them more correct.

If this used to work then something else was going on. If you want to disable the Listbox then you have to provide the disabled prop to the Listbox itself:
https://headlessui.com/react/listbox#listbox

I've updated your CodeSandbox with this change: https://codesandbox.io/s/romantic-maria-d5u1k8?file=/src/App.tsx

For example, this is on 1.7.11, and while it's true that the type isn't complaining, the disabled functionality is not working as expected either: https://codesandbox.io/s/musing-dust-3o7lm5?file=/src/App.tsx

Hope this helps!

[krismorf]

What is the solution for the onClick prop of RadioGroup.Option ?
Should it be changed to onChange?

On 1.7.12 we receive this error:

Type '{ children: Element; onClick: () => void; className: ({ active, checked }: OptionRenderPropArg) => string; onChange: ChangeHandler; onBlur: ChangeHandler; ... 10 more ...; value: string; }' is not assignable to type 'IntrinsicAttributes & CleanProps<"div", RadioPropsWeControl | "value" | "disabled"> & OurProps<"div", OptionRenderPropArg> & { ...; } & { ...; } & { ...; }'.
Property 'onClick' does not exist on type 'IntrinsicAttributes & CleanProps<"div", RadioPropsWeControl | "value" | "disabled"> & OurProps<"div", OptionRenderPropArg> & { ...; } & { ...; } & { ...; }'.ts(2322)

[krall12]

I'm getting a similar typescript error after upgrading to 1.7.12 on the Popover.Button component. It's complaining about the onClick prop everywhere I have it used.

app/routes/__app/user.$username.projects/index.tsx:225:21 - error TS2322: Type '{ children: Element[]; onClick: () => void; className: string; }' is not assignable to type 'IntrinsicAttributes & CleanProps<"button", ButtonPropsWeControl> & OurProps<"button", ButtonRenderPropArg> & { ...; } & { ...; }'.
  Property 'onClick' does not exist on type 'IntrinsicAttributes & CleanProps<"button", ButtonPropsWeControl> & OurProps<"button", ButtonRenderPropArg> & { ...; } & { ...; }'.

225                     onClick={() => {

I suppose I'll downgrade for now.

[arpitjacob]

getting similar on disclosure

Type error: Type '{ children: Element[]; onClick: () => void; className: string; }' is not assignable to type 'IntrinsicAttributes & CleanProps<"button", ButtonPropsWeControl> & OurProps<"button", ButtonRenderPropArg> & { ...; } & { ...; }'.
18:28:07.943

@RobinMalfait please reopen this issue it hasn't been fixed

[RobinMalfait]

@arpitjacob that's a different issue that should be solved by #2329