Prevent sl-hide from firing twice; fixes #275

docs/getting-started/changelog.md

@@ -19,6 +19,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Added experimental `sl-theme` utility and updated theming documentation
 - Fixed a bug where `sl-menu-item` wouldn't render properly in the dark theme
 - Fixed a bug where `sl-select` would show an autocomplete menu
+- Fixed a bug where `sl-dialog` and `sl-drawer` would emit the `sl-hide` event twice [#275](https://github.com/shoelace-style/shoelace/issues/275)
 - Improved placeholder contrast in dark theme
 - Updated to Boostrap Icons 1.1.0
 - Updated to Stencil 2.3.0

src/components/dialog/dialog.tsx

@@ -33,6 +33,8 @@ export class Dialog {
   dialog: HTMLElement;
   modal: Modal;
   panel: HTMLElement;
+  willShow = false;
+  willHide = false;
 
   @Element() host: HTMLSlDialogElement;
 
@@ -100,8 +102,7 @@ export class Dialog {
   /** Shows the dialog */
   @Method()
   async show() {
-    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
-    if (this.isVisible) {
+    if (this.willShow) {
       return;
     }
 
@@ -111,6 +112,7 @@ export class Dialog {
       return;
     }
 
+    this.willShow = true;
     this.isVisible = true;
     this.open = true;
     this.modal.activate();
@@ -121,8 +123,7 @@ export class Dialog {
   /** Hides the dialog */
   @Method()
   async hide() {
-    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
-    if (!this.isVisible) {
+    if (this.willHide) {
       return;
     }
 
@@ -132,6 +133,7 @@ export class Dialog {
       return;
     }
 
+    this.willHide = true;
     this.open = false;
     this.modal.deactivate();
 
@@ -166,6 +168,8 @@ export class Dialog {
     // Ensure we only emit one event when the target element is no longer visible
     if (event.propertyName === 'opacity' && target.classList.contains('dialog__panel')) {
       this.isVisible = this.open;
+      this.willShow = false;
+      this.willHide = false;
       this.open ? this.slAfterShow.emit() : this.slAfterHide.emit();
 
       if (this.open) {

src/components/drawer/drawer.tsx

@@ -32,6 +32,8 @@ export class Drawer {
   drawer: HTMLElement;
   modal: Modal;
   panel: HTMLElement;
+  willShow = false;
+  willHide = false;
 
   @Element() host: HTMLSlDrawerElement;
 
@@ -108,8 +110,7 @@ export class Drawer {
   /** Shows the drawer */
   @Method()
   async show() {
-    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
-    if (this.isVisible) {
+    if (this.willShow) {
       return;
     }
 
@@ -119,6 +120,7 @@ export class Drawer {
       return;
     }
 
+    this.willShow = true;
     this.isVisible = true;
     this.open = true;
 
@@ -132,8 +134,7 @@ export class Drawer {
   /** Hides the drawer */
   @Method()
   async hide() {
-    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
-    if (!this.isVisible) {
+    if (this.willHide) {
       return;
     }
 
@@ -143,6 +144,7 @@ export class Drawer {
       return;
     }
 
+    this.willHide = true;
     this.open = false;
     this.modal.deactivate();
 
@@ -177,6 +179,8 @@ export class Drawer {
     // Ensure we only emit one event when the target element is no longer visible
     if (event.propertyName === 'transform' && target.classList.contains('drawer__panel')) {
       this.isVisible = this.open;
+      this.willShow = false;
+      this.willHide = false;
       this.open ? this.slAfterShow.emit() : this.slAfterHide.emit();
 
       if (this.open) {