From 9970bc84ffdc8e85e54c384ccb3fea965670d09f Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Wed, 2 Jun 2021 19:06:04 -0400
Subject: [PATCH] fixes #452; fixes #453

---
 docs/resources/changelog.md     | 2 ++
 src/components/dialog/dialog.ts | 6 +++---
 src/components/drawer/drawer.ts | 6 +++---
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index 5a185810..1f1654a4 100644
--- a/docs/resources/changelog.md
+++ b/docs/resources/changelog.md
@@ -11,6 +11,8 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Added `?` to optional arguments in methods tables
 - Added the `scrollPosition()` method to `sl-textarea` to get/set scroll position
 - Fixed a bug in `sl-tab-group` where scrollable tab icons were not displaying correctly
+- Fixed a bug in `sl-dialog` and `sl-drawer` where preventing clicks on the overlay no longer worked as described [#452](https://github.com/shoelace-style/shoelace/issues/452)
+- Fixed a bug in `sl-dialog` and `sl-drawer` where setting initial focus no longer worked as described [#453](https://github.com/shoelace-style/shoelace/issues/453)
 - Fixed lifecycle bugs in a number of components [#451](https://github.com/shoelace-style/shoelace/issues/451)
 - Removed `fill: both` from internal animate utility so styles won't "stick" by default [#450](https://github.com/shoelace-style/shoelace/issues/450)
 
diff --git a/src/components/dialog/dialog.ts b/src/components/dialog/dialog.ts
index ba37b4ee..c7c5db6e 100644
--- a/src/components/dialog/dialog.ts
+++ b/src/components/dialog/dialog.ts
@@ -166,7 +166,7 @@ export default class SlDialog extends LitElement {
 
       // Browsers that support el.focus({ preventScroll }) can set initial focus immediately
       if (hasPreventScroll) {
-        const slInitialFocus = this.slInitialFocus.emit();
+        const slInitialFocus = this.slInitialFocus.emit({ cancelable: true });
         if (!slInitialFocus.defaultPrevented) {
           this.panel.focus({ preventScroll: true });
         }
@@ -182,7 +182,7 @@ export default class SlDialog extends LitElement {
       // Browsers that don't support el.focus({ preventScroll }) have to wait for the animation to finish before initial
       // focus to prevent scrolling issues. See: https://caniuse.com/mdn-api_htmlelement_focus_preventscroll_option
       if (!hasPreventScroll) {
-        const slInitialFocus = this.slInitialFocus.emit();
+        const slInitialFocus = this.slInitialFocus.emit({ cancelable: true });
         if (!slInitialFocus.defaultPrevented) {
           this.panel.focus({ preventScroll: true });
         }
@@ -216,7 +216,7 @@ export default class SlDialog extends LitElement {
   }
 
   handleOverlayClick() {
-    const slOverlayDismiss = this.slOverlayDismiss.emit();
+    const slOverlayDismiss = this.slOverlayDismiss.emit({ cancelable: true });
     if (!slOverlayDismiss.defaultPrevented) {
       this.hide();
     }
diff --git a/src/components/drawer/drawer.ts b/src/components/drawer/drawer.ts
index f8673e53..458449ad 100644
--- a/src/components/drawer/drawer.ts
+++ b/src/components/drawer/drawer.ts
@@ -183,7 +183,7 @@ export default class SlDrawer extends LitElement {
 
       // Browsers that support el.focus({ preventScroll }) can set initial focus immediately
       if (hasPreventScroll) {
-        const slInitialFocus = this.slInitialFocus.emit();
+        const slInitialFocus = this.slInitialFocus.emit({ cancelable: true });
         if (!slInitialFocus.defaultPrevented) {
           this.panel.focus({ preventScroll: true });
         }
@@ -199,7 +199,7 @@ export default class SlDrawer extends LitElement {
       // Browsers that don't support el.focus({ preventScroll }) have to wait for the animation to finish before initial
       // focus to prevent scrolling issues. See: https://caniuse.com/mdn-api_htmlelement_focus_preventscroll_option
       if (!hasPreventScroll) {
-        const slInitialFocus = this.slInitialFocus.emit();
+        const slInitialFocus = this.slInitialFocus.emit({ cancelable: true });
         if (!slInitialFocus.defaultPrevented) {
           this.panel.focus({ preventScroll: true });
         }
@@ -233,7 +233,7 @@ export default class SlDrawer extends LitElement {
   }
 
   handleOverlayClick() {
-    const slOverlayDismiss = this.slOverlayDismiss.emit();
+    const slOverlayDismiss = this.slOverlayDismiss.emit({ cancelable: true });
     if (!slOverlayDismiss.defaultPrevented) {
       this.hide();
     }