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

Remove focus() from Listbox Option #1218

Merged
merged 2 commits into from
Mar 9, 2022
Merged

Conversation

RobinMalfait
Copy link
Member

@RobinMalfait RobinMalfait commented Mar 9, 2022

We keep the actual container focused, so we don't require the invidiual
option to be focused as well. We do want to scroll it into view but
that's part of another piece of code.

This should fix an issue where transitions are cut-off because we want the item
to be focused immediately. One fix is to use our focusElement helper which
essentially adds the { preventScroll: true } options. This will be needed if
we want to switch to the roving tabindex strategy, but not right now.

Also cleaned up some manual document.querySelector calls now that we
keep track of a ref.

This should fix #587 because it gets rid of the weird focus() call and this now results in almost exactly the same code as the Menu component.

@vercel
Copy link

vercel bot commented Mar 9, 2022

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployments, click below or on the icon next to each commit.

headlessui-react – ./packages/playground-react

🔍 Inspect: https://vercel.com/tailwindlabs/headlessui-react/ADPyrZ2q23hAALAzDDiehNohnx7F
✅ Preview: https://headlessui-react-git-fix-listbox-transitions-tailwindlabs.vercel.app

headlessui-vue – ./packages/playground-vue

🔍 Inspect: https://vercel.com/tailwindlabs/headlessui-vue/4r5TYv1NpUmpCUXew4R9NZHwn3UX
✅ Preview: https://headlessui-vue-git-fix-listbox-transitions-tailwindlabs.vercel.app

We keep the actual container focused, so we don't require the invidiual
option to be focused as well. We do want to scroll it into view but
that's part of another piece of code.

Also cleaned up some manual `document.querySelector` calls now that we
keep track of a `ref`.
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.

[Bug]: Enter transitions are janky with Listbox (rendered within Portal and Popper)
1 participant