'Typescript: Headless ui - Listbox - open/close management

Headless ui Listbox is not allowing to use open state with typescript. The lisbox should allow multiselect functionality. It should not close when one value is selected. It should listen for multiple selections. Butit is showing the below error.

    Type '{ children: () => Element; as: "div"; className: string; value: any[]; onChange: (value: any[]) => void; open: boolean; }' is not assignable to type 'IntrinsicAttributes & (Props<"div", ListboxRenderPropArg, "value" | "onChange"> & { value: any[]; onChange(value: any[]): void; disabled?: boolean; horizontal?: boolean; })'.
  Property 'open' does not exist on type 'IntrinsicAttributes & (Props<"div", ListboxRenderPropArg, "value" | "onChange"> & { value: any[]; onChange(value: any[]): void; disabled?: boolean; horizontal?: boolean; })'.ts(2322)

Code sample: https://codesandbox.io/s/headlessui-react-listbox-multiple-mockup-forked-1slqpw?file=/src/App.tsx Headless ui version: 1.5.0 Language: Typescript

The same code seems to be working fine with headless ui v0.2.0 and Javascript.

Any suggestion would be helpful.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source