Skip to content

Fix Listbox not focusing first or last option on ArrowUp/ArrowDown #3721

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

Merged
merged 2 commits into from
May 9, 2025

Conversation

RobinMalfait
Copy link
Member

This PR fixes an issue where if a Listbox does not have a value yet, and it's opened via an ArrowUp or ArrowDown (on the ListboxButton) then it didn't correctly go to the firs or last option.

Before, we were opening the listbox in a flushSync() call, after that call we were focusing the first or last option depending on if you used the ArrowDown or ArrowUp keys.

However, the options can and will be registered at a later point in time, which means that the focus of first or last option is technically going to fail because no options are available yet.

With this fix we don't need the flushSync call, and instead we passthrough a pending focus. Once the options are registered, if a pending focus is present, only then will we focus the correct option.

This gets rid of timing issues.

Before, we were opening the listbox in a `flushSync()` call, after that
call we were focusing the first or last option depending on if you used
the ArrowDown or ArrowUp keys.

However, the options can and will be registered at a later point, which
means that the focus of first or last option is technically going to
fail because no options are available yet.

With this fix we don't need the `flushSync` call, and instead we
passthrough a pending focus. Once the options are registered, if a
pending focus is present, only then will we focus the correct option.

This gets rid of timing issues.
Copy link

vercel bot commented May 9, 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 May 9, 2025 9:57am
headlessui-vue ✅ Ready (Inspect) Visit Preview 💬 Add feedback May 9, 2025 9:57am

@RobinMalfait RobinMalfait enabled auto-merge (squash) May 9, 2025 09:57
@RobinMalfait RobinMalfait merged commit c9f8f30 into main May 9, 2025
8 checks passed
@RobinMalfait RobinMalfait deleted the fix/focus-correct-listbox-option branch May 9, 2025 09:58
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.

1 participant