feat(utilities): shadow-DOM-aware getActiveElement for focus checks - #693
Open
johnleider wants to merge 1 commit into
Open
feat(utilities): shadow-DOM-aware getActiveElement for focus checks#693johnleider wants to merge 1 commit into
johnleider wants to merge 1 commit into
Conversation
document.activeElement returns the shadow HOST when focus is inside an open shadow root (custom element), silently breaking focus checks. Add a shadow-piercing getActiveElement() to #v0/utilities and use it in useHotkey (typing guard), useClickOutside (iframe-outside check), and useDragDrop's keyboard adapter. Same value as document.activeElement in light DOM; open shadow roots only. v0's core focus nav (useRovingFocus/useVirtualFocus) is registry/state-driven and was already immune; this closes the remaining peripheral document.activeElement reads. Prompted by the v3/v4 VMenu shadow-DOM bug (vuetifyjs/vuetify#23024).
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Hardens v0 for the open-Shadow-DOM / web-component case, prompted by the v3/v4 VMenu keyboard-nav bug (vuetifyjs/vuetify#23024).
Context
document.activeElementreturns the shadow host, not the focused descendant, inside an open shadow root — which silently breaks focus logic. In v4 this broke VList/VMenu arrow-nav. v0's core nav is already immune (useRovingFocus/useVirtualFocusare registry/state-driven, notdocument.activeElement-driven;useClickOutsidealready usescomposedPath();usePopoveruses native Popover + CSS anchor-name with nogetElementById). This PR closes the remaining peripheral reads.Change
getActiveElement()to#v0/utilities(helpers.ts) — walks open shadow roots; same value asdocument.activeElementin light DOM; SSR-safe (null); open roots only.document.activeElementsites:useHotkey(typing guard),useClickOutside(iframe-outside check),useDragDropkeyboard adapter.maturity.json(utilities,preview) updated for the new export; changeset added (minor).Not covered
Portalstill teleportsto: 'body'by default, so overlays escape the shadow root (styles/focus cross the boundary) — mitigable viato= a shadow-internal target; documenting for embedders is a separate follow-up, not a focus bug.