fix(material/dialog): focus restoration not working inside shadow dom#21811
fix(material/dialog): focus restoration not working inside shadow dom#21811annieyw merged 1 commit intoangular:masterfrom
Conversation
Related to angular#21796. The dialog focus restoration works by grabbing `document.activeElement` before the dialog is opened and restoring focus to the element on destroy. This won't work if the element is inside the shadow DOM, because the browser will return the shadow root. These changes add a workaround.
crisbeto
added
P3
google-cla
bot
added
the
cla: yes
| // If the `activeElement` is inside a shadow root, `document.activeElement` will | ||
| // point to the shadow root so we have to descend into it ourselves. | ||
| const activeElement = this._document.activeElement; | ||
| return activeElement?.shadowRoot?.activeElement as HTMLElement || activeElement; |
There was a problem hiding this comment.
Isn't it possible for the element to be within multiple layers of shadow dom?
There was a problem hiding this comment.
It is possible, but my assumption was activeElement would point to the closest shadow root. That being said, I haven't actually tried it. If that's the case, we might need some reusable utility under cdk/platform since we have a lot of places that look only at document.activeElement.
jelbourn
left a comment
jelbourn
left a comment
There was a problem hiding this comment.
LGTM as a solution for now, then; we can revisit the shadow dom hierarchy if it becomes a problem
…#21811) Related to #21796. The dialog focus restoration works by grabbing `document.activeElement` before the dialog is opened and restoring focus to the element on destroy. This won't work if the element is inside the shadow DOM, because the browser will return the shadow root. These changes add a workaround. (cherry picked from commit be508da)
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
3 participants
Related to #21796. The dialog focus restoration works by grabbing
document.activeElementbefore the dialog is opened and restoring focus to the element on destroy. This won't work if the element is inside the shadow DOM, because the browser will return the shadow root. These changes add a workaround.