-
-
Notifications
You must be signed in to change notification settings - Fork 98
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
Change Dialog focus behavior on open? #427
Comments
I had the same issue and for now have been using this hacky workaround inside <!-- svelte-ignore a11y-autofocus -->
<input class="fixed left-0 top-0 h-0 w-0" type="checkbox" autofocus={true} /> It's not the prettiest, so would also be happy to find a more direct way of doing this. I also found that the layout shift is not always very well-behaved (e.g. sometimes the keyboard will open without the dialog shifting and hide the content from the user underneath the keyboard), but not sure how much of this is dictated by browser behavior... |
So because there's a focus trap in the dialog when open if you truly didn't focus anything at all, keyboard users would be trapped with no way to navigate through the component. I do however think that we probably shouldn't focus automatically when opened via a touch or click event, rather only when the user presses tab for the first time which would solve this issue with mobile devices. I will investigate further this weekend, thanks for raising the issue! |
I used following prevent autofocus on the input element, which caused the virtual keyboard to open immediately on mobile. Workaround / FixSet the focus to be on
See my comment for more details on melt-ui #1007 |
@devjume interestingly, this does not seem to work for the Drawer component. Any ideas on how to get around auto focus for Drawers? |
Closing as fixed in |
Change Type
Addition
Proposed Changes
When a Dialog is opened, it automatically focuses on the first input element. On mobile, this causes the virtual keyboard to open immediately.
Is there a way to change the focus behavior for Dialogs?
I've tried passing
openFocus={null}
to the root of the Dialog but it did not work. I am not sure if I'm using it correctly.The text was updated successfully, but these errors were encountered: