Typescript: Headless ui - Listbox - open/close management

Viewed 1192

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.

0 Answers
Related