From 951dbabfc43d624548977a0495e1af6836ae3255 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Wed, 15 Oct 2025 10:26:43 -0400 Subject: [PATCH] focus dialog on open; fixes #1302 (#1587) --- packages/webawesome/docs/docs/resources/changelog.md | 1 + packages/webawesome/src/components/dialog/dialog.ts | 2 ++ packages/webawesome/src/components/drawer/drawer.ts | 2 ++ 3 files changed, 5 insertions(+) diff --git a/packages/webawesome/docs/docs/resources/changelog.md b/packages/webawesome/docs/docs/resources/changelog.md index d8766cbd9..99ad9a2ec 100644 --- a/packages/webawesome/docs/docs/resources/changelog.md +++ b/packages/webawesome/docs/docs/resources/changelog.md @@ -21,6 +21,7 @@ Components with the Experimental badge sh - Fixed a bug in `` where its value would revert to `""` when checked / unchecked [pr:1547] - Fixed a bug that caused icon button labels to not render in frameworks [issue:1542] - Fixed a bug in `` that caused the `name` property not to reflect [pr:1538] +- Fixed a bug in `` and `` that prevented focus from being set on the dialog/drawer when opened [issue:1302] - Fixed an overflow style that was causing tab group content to be unnecessarily truncated [issue:1401] - Fixed a bug in `` that caused icon buttons to render when non-text nodes were slotted in [issue:1475] diff --git a/packages/webawesome/src/components/dialog/dialog.ts b/packages/webawesome/src/components/dialog/dialog.ts index cb7663ec0..297f498df 100644 --- a/packages/webawesome/src/components/dialog/dialog.ts +++ b/packages/webawesome/src/components/dialog/dialog.ts @@ -197,6 +197,8 @@ export default class WaDialog extends WebAwesomeElement { const elementToFocus = this.querySelector('[autofocus]'); if (elementToFocus && typeof elementToFocus.focus === 'function') { elementToFocus.focus(); + } else { + this.dialog.focus(); } }); diff --git a/packages/webawesome/src/components/drawer/drawer.ts b/packages/webawesome/src/components/drawer/drawer.ts index 6622dc2ec..c13b8a52f 100644 --- a/packages/webawesome/src/components/drawer/drawer.ts +++ b/packages/webawesome/src/components/drawer/drawer.ts @@ -210,6 +210,8 @@ export default class WaDrawer extends WebAwesomeElement { const elementToFocus = this.querySelector('[autofocus]'); if (elementToFocus && typeof elementToFocus.focus === 'function') { elementToFocus.focus(); + } else { + this.drawer.focus(); } });