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();
}
});