fixes #452; fixes #453

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)
 

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

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