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

Fix Unexpected undefined crash in Combobox component with virtual mode #3678

Merged
merged 3 commits into from
Apr 4, 2025

Conversation

RobinMalfait
Copy link
Member

@RobinMalfait RobinMalfait commented Apr 4, 2025

This PR fixes an issue where the Combobox component crashes if you are using the virtual option and you quickly type something such that the Combobox opens but no valid options are available.

We already check if the current active index is available in the internal options list. However, if you then call virtualizer.scrollToIndex(data.activeOptionIndex) it will crash if you are too fast.

Screen.Recording.2025-04-04.at.12.53.40.mov

If you are typing slowly, then it will work as expected.

Screen.Recording.2025-04-04.at.12.54.01.mov

I did find an open issue on TanStack's repo about this: TanStack/virtual#879

This PR is basically a workaround by delaying the call. But it does have the expected behavior now.

Screen.Recording.2025-04-04.at.12.57.40.mov

Fixes: #3583

We already verify that the `activeOptionIndex` is inside the `options`
before we call the `virtualizer.scrollToIndex` function.

However, if you do this when the virtualizer isn't ready internally yet,
then you get an error like `unexpected undefined`.

Found an open issue on their GitHub: TanStack/virtual#879

Don't know if there is a better fix we can apply here, but delaying the
`scrollToIndex` does seem to fix the problem.

Another thing I tried is waiting for the DOM to be ready, but we already
only run this code _if_ the DOM `el` is available.
Copy link

vercel bot commented Apr 4, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
headlessui-react ✅ Ready (Inspect) Visit Preview 💬 Add feedback Apr 4, 2025 10:57am
headlessui-vue ✅ Ready (Inspect) Visit Preview 💬 Add feedback Apr 4, 2025 10:57am

@RobinMalfait RobinMalfait merged commit 9d3b0ff into main Apr 4, 2025
8 checks passed
@RobinMalfait RobinMalfait deleted the fix/issue-3583 branch April 4, 2025 12:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

unexpected undefined using combobox
2 participants