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

[Bug Report][2.6.9] Hidden inputs break v-dialog focus trap #15745

Closed
shengslogar opened this issue Sep 7, 2022 · 2 comments
Closed

[Bug Report][2.6.9] Hidden inputs break v-dialog focus trap #15745

shengslogar opened this issue Sep 7, 2022 · 2 comments
Assignees
Labels
C: VDialog VDialog T: bug Functionality that does not work as intended/expected
Milestone

Comments

@shengslogar
Copy link

Environment

Vuetify Version: 2.6.9
Vue Version: 2.7.10
Browsers: Chrome 105.0.0.0
OS: Mac OS 10.15.7

Steps to reproduce

Place any <input type="hidden"> inside a <v-dialog>.

Expected Behavior

Focus is trapped within dialog.

Actual Behavior

Focus trap breaks and background elements are focusable.

Reproduction Link

https://codepen.io/shengslogar/pen/oNdjWNo

Other comments

This is the result of the query selector here:

// Find and focus the first available element inside the dialog
const focusable = this.$refs.dialog.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')
const el = [...focusable].find(el => !el.hasAttribute('disabled')) as HTMLElement | undefined
el && el.focus()

At a bare minimum, hidden inputs should be excluded from this selector. One might also consider aria-hidden inputs or display: none inputs (but the latter would require computing element dimensions which could result in a breaking change).

@shengslogar
Copy link
Author

Additionally, the :not([tabindex="-1"]) selector should wrap all the other selectors as I would expect the following workaround to be supported:

<input type="hidden" tabindex="-1">

@KaelWD KaelWD added T: bug Functionality that does not work as intended/expected C: VDialog VDialog and removed S: triage labels Sep 8, 2022
@KaelWD KaelWD added this to the v2.6.x milestone Sep 8, 2022
@KaelWD KaelWD self-assigned this Sep 8, 2022
@KaelWD KaelWD closed this as completed in 89e3850 Sep 8, 2022
@shengslogar
Copy link
Author

Sweet, thanks @KaelWD!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
C: VDialog VDialog T: bug Functionality that does not work as intended/expected
Projects
None yet
Development

No branches or pull requests

2 participants