dispatch `ActionTypes.UpdateVirtualOptions` drops `disabled` function

[Derek Lindahl]

What package within Headless UI are you using?

For example: @headlessui/react

What version of that package are you using?

v2.0.3

What browser are you using?

Chrome Version 124.0.6367.209 (Official Build) (arm64)

Reproduction URL

https://codesandbox.io/p/devbox/kind-meitner-xwk2gg?file=%2Fsrc%2FApp.jsx

Describe your issue

When updating the virtual property of Combobox, useIsoMorphicEffect is called with a dispatch call to ActionTypes.UpdateVirtualOptions. This reducer dispatch updates the internal virtual reference using Object.assign({}, state.virtual, { options: action.options }) which notably does not include the virtual.disabled property, effectively setting it to undefined which then throws a P.disabled is not a function error when ComboboxOptions is rendered.

In the example provided, the initial state is to not be virtualized. The list renders as expected. Toggling into a virtualized list causes the aforementioned bug to trigger and you get the described error.

Likewise, if you start the demo off with a virtualized state, the list renders as expected (virtualized). Toggling the state to not virtualized causes a different error where it is attempting to call the render prop of the virtualized ComboboxOptions component. I believe this is caused by the same Object.assign reducer call in that when the incoming virtual object is undefined, it is still setting a virtual state with an empty options property. This causes the user component to render the un-virtualized component while the internal state of the Combobox is still reflecting a virtualized list.

[Robin Malfait]

Hey!

Thanks for the bug report, can you make the CodeSandbox public? it's currently showing a "Devbox not found" error.

[Derek Lindahl]

Oops! Done! https://codesandbox.io/p/devbox/kind-meitner-xwk2gg

[Robin Malfait]

This should be fixed by #3236, and will be available in the next release.

You can already try it using:

• npm install @headlessui/react@insiders.

I've also updated your CodeSandbox link with this insiders version to show that it's fixed now: https://codesandbox.io/p/devbox/quirky-bogdan-j7wfpv