From 4ae9db6c67e3704a7be8bd83dfa18dbd50b7fc94 Mon Sep 17 00:00:00 2001 From: Elizabeth Mitchell Date: Wed, 27 Dec 2023 08:10:43 -0800 Subject: [PATCH] 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 --- dialog/internal/dialog.ts | 26 ++++++++++++++++++++------ 1 file changed, 20 insertions(+), 6 deletions(-) diff --git a/dialog/internal/dialog.ts b/dialog/internal/dialog.ts index 7dc24746cc..ce16476e87 100644 --- a/dialog/internal/dialog.ts +++ b/dialog/internal/dialog.ts @@ -36,12 +36,6 @@ export class Dialog extends LitElement { requestUpdateOnAriaChange(Dialog); } - /** @nocollapse */ - static override shadowRootOptions = { - ...LitElement.shadowRootOptions, - delegatesFocus: true, - }; - /** * Opens the dialog when set to `true` and closes it when set to `false`. */ @@ -133,6 +127,26 @@ export class Dialog extends LitElement { super(); if (!isServer) { 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 `` 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 + // `` 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(); + }); } }