From a3beaafbcce1a59ec72a9a2e54325e5150d077e6 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Mon, 10 May 2021 09:31:53 -0400
Subject: [PATCH] fixes #424

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

diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index eb8f6716..da5da123 100644
--- a/docs/resources/changelog.md
+++ b/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)
diff --git a/src/components/dialog/dialog.ts b/src/components/dialog/dialog.ts
index 10fe3db5..4929fb94 100644
--- a/src/components/dialog/dialog.ts
+++ b/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);
+      }
     }
   }
 
diff --git a/src/components/drawer/drawer.ts b/src/components/drawer/drawer.ts
index 176a270b..a289ced5 100644
--- a/src/components/drawer/drawer.ts
+++ b/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);
+      }
     }
   }