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.

Sign up for GitHub

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

Jump to bottom

Fix Dialog cycling #553

Merged
merged 5 commits into from
Mar 3, 2022
Merged

Fix Dialog cycling #553

merged 5 commits into from
Mar 3, 2022

Conversation

RobinMalfait
Copy link
Member

@RobinMalfait RobinMalfait commented May 21, 2021 •
edited
Loading

This PR technically fixes 2 issues. I started by making the Vue code similar to the React code to have as much similarities between the 2 codebases. This should make things easier in the future when adding features or fixing bugs. Because of this, we implemented the "nested dialogs" feature.

By doing this, we also fixed the actual issue this is fixing, which is when you add the initialFocus ref, then the Tab Lock was broken. This is fixed now.

It took a while, since the PR has been open for a few months... but we are ready now!

Fixes: #542

@vercel
Copy link

vercel bot commented May 21, 2021 •
edited
Loading

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-vue – ./packages/playground-vue

🔍 Inspect: https://vercel.com/tailwindlabs/headlessui-vue/Ej7YjE1QVwEKHcLNs4yshVvvy2xK
✅ Preview: https://headlessui-vue-git-fix-dialog-cycling-tailwindlabs.vercel.app

headlessui-react – ./packages/playground-react

🔍 Inspect: https://vercel.com/tailwindlabs/headlessui-react/o6gLp7cUf35tWrn5tFgUDecNwVqR
✅ Preview: https://headlessui-react-git-fix-dialog-cycling-tailwindlabs.vercel.app

@francoismassart
Copy link

Any update on this MR ? We are facing the same issue.

Thanks!

@RobinMalfait RobinMalfait changed the base branch from develop to main January 17, 2022 13:03
@zusorio
Copy link

zusorio commented Mar 2, 2022

Any more updates in this? I just ran into this issue myself.

@RobinMalfait RobinMalfait self-assigned this Mar 3, 2022
@RobinMalfait RobinMalfait changed the title Fix dialog cycling Fix Dialog cycling Mar 3, 2022
@RobinMalfait RobinMalfait merged commit 4f52d83 into main Mar 3, 2022
@RobinMalfait RobinMalfait deleted the fix-dialog-cycling branch March 3, 2022 22:59
@RobinMalfait
Copy link
Member Author

@francoismassart @ZusorCode This should be fixed, and will be available in the next release.

You can already try it using npm install @headlessui/vue@insiders or yarn add @headlessui/vue@insiders.

@RobinMalfait RobinMalfait mentioned this pull request Mar 3, 2022
Closed
@zusorio
Copy link

zusorio commented Mar 4, 2022

This fixed the issue I was having, thank you!

RobinMalfait added a commit that referenced this pull request Mar 7, 2022
@RobinMalfait
Fix Dialog cycling (#553)
e0cc62c 
* add tests to verify that tabbing around when using `initialFocus` works

* add nesting example to `playground-vue`

* fix nested dialog and initialFocus cycling

* make React dialog consistent

- Disable FocusLock on leaf Dialog's

* update changelog
@igorms-pro
Copy link

Hi guys, do you have any idea when the next release will be available?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees

@RobinMalfait RobinMalfait

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[Bug]: initialFocus attribute on <Dialog> stops the cycling through focusable elements
4 participants
@RobinMalfait @francoismassart @zusorio @igorms-pro