Skip to content

Commit 4ae9db6

Browse files
asynclizcopybara-github
authored andcommitted
fix(dialog): text is now selectable
Fixes #5145 Added some notes on Material dialog focusing. Normally the dialog should *not* be focused, so you may wonder why we care about delegating focus at all. It's because: 1. We don't have focus trapping yet 2. We need to handle what happens when there isn't a focusable child in the dialog, even though that's against spec. PiperOrigin-RevId: 594013328
1 parent 689f945 commit 4ae9db6

File tree

1 file changed

+20
-6
lines changed

1 file changed

+20
-6
lines changed

dialog/internal/dialog.ts

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -36,12 +36,6 @@ export class Dialog extends LitElement {
3636
requestUpdateOnAriaChange(Dialog);
3737
}
3838

39-
/** @nocollapse */
40-
static override shadowRootOptions = {
41-
...LitElement.shadowRootOptions,
42-
delegatesFocus: true,
43-
};
44-
4539
/**
4640
* Opens the dialog when set to `true` and closes it when set to `false`.
4741
*/
@@ -133,6 +127,26 @@ export class Dialog extends LitElement {
133127
super();
134128
if (!isServer) {
135129
this.addEventListener('submit', this.handleSubmit);
130+
131+
// We do not use `delegatesFocus: true` due to a Chromium bug with
132+
// selecting text.
133+
// See https://bugs.chromium.org/p/chromium/issues/detail?id=950357
134+
//
135+
// Material requires using focus trapping within the dialog (see
136+
// b/314840853 for the bug to add it). This would normally mean we don't
137+
// care about delegating focus since the `<dialog>` never receives it.
138+
// However, we still need to handle situations when a user has not
139+
// provided an focusable child in the content. When that happens, the
140+
// `<dialog>` itself is focused.
141+
//
142+
// Listen to focus/blur instead of focusin/focusout since those can bubble
143+
// from content.
144+
this.addEventListener('focus', () => {
145+
this.dialog?.focus();
146+
});
147+
this.addEventListener('blur', () => {
148+
this.dialog?.blur();
149+
});
136150
}
137151
}
138152

0 commit comments

Comments
 (0)