Combobox multiple crashes when <Combobox.Options> is set to be displayed

[ahmadnsam]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v1.7.3

What browser are you using?

Edge

Reproduction URL

https://github.com/ahmadnsam/powerapps-modals/tree/multi-choices-fix

steps to reproduce:
copy repo
npm install
npm run dev

Describe your issue

When setting the combo box as multiple combo box, the <Combobox.Option> is causing a problem, when you open the combo box, the app crashes and give the below error in the console

if you replace the <Combobox.Option> with for example it works fine, and the list is displayed.

Note: its only happening when setting the combobox as multiple

[RobinMalfait]

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

Can you update the reproduction repo so that it showcases the actual problem?

Currently I'm missing some information I'm afraid:

1. Running npm run dev results in a crash because props.modal becomes undefined

2. Looking at the code, it looks like the data is coming from a `getDataParam()` which in turn looks at data in the url, which I don't have. 3. If I bypass that information, I see this:

I would love to help, but please provide all the information I need to reproduce this issue.

[ahmadnsam]

Thanks Robin for the help you're providing, much appreciated

I created a branch where it has a sample data, the link in the bug report is https://github.com/ahmadnsam/powerapps-modals/tree/multi-choices-fix which has it.

If you check in App.tsx you'll notice that I commented out the getDataParam and I added the sample function which has the data there.

//setModal(getDataParam());
setModal(sample());

and once I hit npm run dev I see this

Simulation

if in app.tsx, in the Json sample function, when its multi it fails

but when you remove this value from the json, it works, check below

I hope this will work.

Thanks again Robin!

[thecrypticace]

This is happening because the combobox is changing from an uncontrolled combobox to a controlled one. We're likely going to add a warning for this as React itself warns when this happens for input, select, etc…

If you default the combobox value to [] instead of undefined this problem goes away. I think that value={inputs[props.id] ?? []} would be sufficient.

[ahmadnsam]

That works @thecrypticace Thanks a lot!