fix: don't show focus overlay outline when opened with the mouse (#10105)

jouni · web-flow · commit 17c132277c09 · 2025-08-28T14:52:16.000+03:00
diff --git a/packages/confirm-dialog/src/vaadin-confirm-dialog.js b/packages/confirm-dialog/src/vaadin-confirm-dialog.js
@@ -85,7 +85,7 @@ class ConfirmDialog extends ConfirmDialogMixin(ElementMixin(ThemePropertyMixin(P
         display: none !important;
       }
 
-      :host(:focus) ::part(overlay) {
+      :host(:focus-visible) ::part(overlay) {
         outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
       }
     `;
diff --git a/packages/crud/src/vaadin-crud-dialog.js b/packages/crud/src/vaadin-crud-dialog.js
@@ -109,7 +109,7 @@ class CrudDialog extends DialogBaseMixin(ThemePropertyMixin(PolylitMixin(LitElem
         display: none !important;
       }
 
-      :host(:focus) ::part(overlay) {
+      :host(:focus-visible) ::part(overlay) {
         outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
       }
     `;
diff --git a/packages/dialog/src/vaadin-dialog.js b/packages/dialog/src/vaadin-dialog.js
@@ -111,7 +111,7 @@ class Dialog extends DialogSizeMixin(
         display: none !important;
       }
 
-      :host(:focus) ::part(overlay) {
+      :host(:focus-visible) ::part(overlay) {
         outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
       }
     `;
diff --git a/packages/login/src/vaadin-login-overlay.js b/packages/login/src/vaadin-login-overlay.js
@@ -81,7 +81,7 @@ class LoginOverlay extends LoginFormMixin(LoginOverlayMixin(ElementMixin(Themabl
         display: none !important;
       }
 
-      :host(:focus) ::part(overlay) {
+      :host(:focus-visible) ::part(overlay) {
         outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
       }
     `;
diff --git a/packages/popover/src/vaadin-popover.js b/packages/popover/src/vaadin-popover.js
@@ -228,7 +228,7 @@ class Popover extends PopoverPositionMixin(
         display: none !important;
       }
 
-      :host(:focus) ::part(overlay) {
+      :host(:focus-visible) ::part(overlay) {
         outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
       }
     `;

Original file line number	Diff line number	Diff line change
`@@ -85,7 +85,7 @@ class ConfirmDialog extends ConfirmDialogMixin(ElementMixin(ThemePropertyMixin(P`
`85`	`85`	`display: none !important;`
`86`	`86`	`}`
`87`	`87`
`88`		`- :host(:focus) ::part(overlay) {`
	`88`	`+ :host(:focus-visible) ::part(overlay) {`
`89`	`89`	`outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);`
`90`	`90`	`}`
`91`	`91`	`;
Original file line number	Diff line number	Diff line change
`@@ -109,7 +109,7 @@ class CrudDialog extends DialogBaseMixin(ThemePropertyMixin(PolylitMixin(LitElem`
`109`	`109`	`display: none !important;`
`110`	`110`	`}`
`111`	`111`
`112`		`- :host(:focus) ::part(overlay) {`
	`112`	`+ :host(:focus-visible) ::part(overlay) {`
`113`	`113`	`outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);`
`114`	`114`	`}`
`115`	`115`	`;
Original file line number	Diff line number	Diff line change
`@@ -111,7 +111,7 @@ class Dialog extends DialogSizeMixin(`
`111`	`111`	`display: none !important;`
`112`	`112`	`}`
`113`	`113`
`114`		`- :host(:focus) ::part(overlay) {`
	`114`	`+ :host(:focus-visible) ::part(overlay) {`
`115`	`115`	`outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);`
`116`	`116`	`}`
`117`	`117`	`;
Original file line number	Diff line number	Diff line change
`@@ -81,7 +81,7 @@ class LoginOverlay extends LoginFormMixin(LoginOverlayMixin(ElementMixin(Themabl`
`81`	`81`	`display: none !important;`
`82`	`82`	`}`
`83`	`83`
`84`		`- :host(:focus) ::part(overlay) {`
	`84`	`+ :host(:focus-visible) ::part(overlay) {`
`85`	`85`	`outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);`
`86`	`86`	`}`
`87`	`87`	`;
Original file line number	Diff line number	Diff line change
`@@ -228,7 +228,7 @@ class Popover extends PopoverPositionMixin(`
`228`	`228`	`display: none !important;`
`229`	`229`	`}`
`230`	`230`
`231`		`- :host(:focus) ::part(overlay) {`
	`231`	`+ :host(:focus-visible) ::part(overlay) {`
`232`	`232`	`outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);`
`233`	`233`	`}`
`234`	`234`	`;