Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

dispatch ActionTypes.UpdateVirtualOptions drops disabled function #3235

Closed
dlindahl opened this issue May 23, 2024 · 3 comments · Fixed by #3236
Closed

dispatch ActionTypes.UpdateVirtualOptions drops disabled function #3235

dlindahl opened this issue May 23, 2024 · 3 comments · Fixed by #3236
Assignees

Comments

@dlindahl
Copy link

dlindahl commented May 23, 2024

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.

@RobinMalfait
Copy link
Member

Hey!

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

@dlindahl
Copy link
Author

@RobinMalfait
Copy link
Member

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
2 participants