Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # 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 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 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!

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

No branches or pull requests

2 participants