Skip to content

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