mirror of
https://github.com/material-components/material-web.git
synced 2024-09-11 13:46:10 +03:00
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
This commit is contained in:
parent
689f9459c2
commit
4ae9db6c67
@ -36,12 +36,6 @@ export class Dialog extends LitElement {
|
|||||||
requestUpdateOnAriaChange(Dialog);
|
requestUpdateOnAriaChange(Dialog);
|
||||||
}
|
}
|
||||||
|
|
||||||
/** @nocollapse */
|
|
||||||
static override shadowRootOptions = {
|
|
||||||
...LitElement.shadowRootOptions,
|
|
||||||
delegatesFocus: true,
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Opens the dialog when set to `true` and closes it when set to `false`.
|
* Opens the dialog when set to `true` and closes it when set to `false`.
|
||||||
*/
|
*/
|
||||||
@ -133,6 +127,26 @@ export class Dialog extends LitElement {
|
|||||||
super();
|
super();
|
||||||
if (!isServer) {
|
if (!isServer) {
|
||||||
this.addEventListener('submit', this.handleSubmit);
|
this.addEventListener('submit', this.handleSubmit);
|
||||||
|
|
||||||
|
// We do not use `delegatesFocus: true` due to a Chromium bug with
|
||||||
|
// selecting text.
|
||||||
|
// See https://bugs.chromium.org/p/chromium/issues/detail?id=950357
|
||||||
|
//
|
||||||
|
// Material requires using focus trapping within the dialog (see
|
||||||
|
// b/314840853 for the bug to add it). This would normally mean we don't
|
||||||
|
// care about delegating focus since the `<dialog>` never receives it.
|
||||||
|
// However, we still need to handle situations when a user has not
|
||||||
|
// provided an focusable child in the content. When that happens, the
|
||||||
|
// `<dialog>` itself is focused.
|
||||||
|
//
|
||||||
|
// Listen to focus/blur instead of focusin/focusout since those can bubble
|
||||||
|
// from content.
|
||||||
|
this.addEventListener('focus', () => {
|
||||||
|
this.dialog?.focus();
|
||||||
|
});
|
||||||
|
this.addEventListener('blur', () => {
|
||||||
|
this.dialog?.blur();
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user