From d7bf0bd65344e31ad8229e081fb27e904a4e90d6 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Wed, 26 May 2021 07:51:57 -0400
Subject: [PATCH] fixes #443

---
 docs/resources/changelog.md         |  4 ++++
 src/components/dropdown/dropdown.ts | 33 ++++++++++++++++-------------
 2 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index 9dbf7de5..3387304f 100644
--- a/docs/resources/changelog.md
+++ b/docs/resources/changelog.md
@@ -6,6 +6,10 @@ Components with the <sl-badge type="warning" pill>Experimental</sl-badge> badge
 
 _During the beta period, these restrictions may be relaxed in the event of a mission-critical bug._ 🐛
 
+## Next
+
+- Fixed a bug where removing `sl-dropdown` from the DOM and adding it back destroyed the popover reference [#443](https://github.com/shoelace-style/shoelace/issues/443)
+
 ## 2.0.0-beta.40
 
 - 🚨 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)
diff --git a/src/components/dropdown/dropdown.ts b/src/components/dropdown/dropdown.ts
index 64ae6223..5abd623e 100644
--- a/src/components/dropdown/dropdown.ts
+++ b/src/components/dropdown/dropdown.ts
@@ -95,24 +95,27 @@ export default class SlDropdown extends LitElement {
     if (!this.containingElement) {
       this.containingElement = this;
     }
+
+    // Create the popover after render
+    this.updateComplete.then(() => {
+      this.popover = new Popover(this.trigger, this.positioner, {
+        strategy: this.hoist ? 'fixed' : 'absolute',
+        placement: this.placement,
+        distance: this.distance,
+        skidding: this.skidding,
+        transitionElement: this.panel,
+        onAfterHide: () => this.slAfterHide.emit(),
+        onAfterShow: () => this.slAfterShow.emit(),
+        onTransitionEnd: () => {
+          if (!this.open) {
+            this.panel.scrollTop = 0;
+          }
+        }
+      });
+    });
   }
 
   firstUpdated() {
-    this.popover = new Popover(this.trigger, this.positioner, {
-      strategy: this.hoist ? 'fixed' : 'absolute',
-      placement: this.placement,
-      distance: this.distance,
-      skidding: this.skidding,
-      transitionElement: this.panel,
-      onAfterHide: () => this.slAfterHide.emit(),
-      onAfterShow: () => this.slAfterShow.emit(),
-      onTransitionEnd: () => {
-        if (!this.open) {
-          this.panel.scrollTop = 0;
-        }
-      }
-    });
-
     // Show on init if open
     if (this.open) {
       this.show();