fixes #424

docs/resources/changelog.md

@@ -11,6 +11,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - 🚨 BREAKING: renamed `sl-responsive-embed` to `sl-responsive-media` and added support for images and videos [#436](https://github.com/shoelace-style/shoelace/issues/436)
 - Fixed a bug where setting properties before an element was defined would render incorrectly [#425](https://github.com/shoelace-style/shoelace/issues/425)
 - Fixed a bug that caused all modules to be imported when cherry picking certain components [#439](https://github.com/shoelace-style/shoelace/issues/439)
+- Fixed a bug where the scrollbar would reposition `sl-dialog` on hide causing it to jump [#424](https://github.com/shoelace-style/shoelace/issues/424)
 - Improved a11y in `sl-progress-ring`
 - Updated React docs to use [`@shoelace-style/react`](https://github.com/shoelace-style/react)
 - Updated NextJS docs [#434](https://github.com/shoelace-style/shoelace/pull/434)

src/components/dialog/dialog.ts

@@ -173,8 +173,6 @@ export default class SlDialog extends LitElement {
     if (trigger && typeof trigger.focus === 'function') {
       setTimeout(() => trigger.focus());
     }
-
-    unlockBodyScrolling(this);
   }
 
   handleCloseClick() {
@@ -213,6 +211,10 @@ export default class SlDialog extends LitElement {
       this.willShow = false;
       this.willHide = false;
       this.open ? this.slAfterShow.emit() : this.slAfterHide.emit();
+
+      if (!this.open) {
+        unlockBodyScrolling(this);
+      }
     }
   }
 

src/components/drawer/drawer.ts

@@ -182,8 +182,6 @@ export default class SlDrawer extends LitElement {
     if (trigger && typeof trigger.focus === 'function') {
       setTimeout(() => trigger.focus());
     }
-
-    unlockBodyScrolling(this);
   }
 
   handleCloseClick() {
@@ -222,6 +220,10 @@ export default class SlDrawer extends LitElement {
       this.willShow = false;
       this.willHide = false;
       this.open ? this.slAfterShow.emit() : this.slAfterHide.emit();
+
+      if (!this.open) {
+        unlockBodyScrolling(this);
+      }
     }
   }