From 33612590ed6ecb800c0307858005f1a6f1ec179a Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Fri, 8 Apr 2022 08:52:20 -0400
Subject: [PATCH] fixes #720

---
 docs/resources/changelog.md         |  1 +
 src/components/dropdown/dropdown.ts | 26 ++++++++++++++++++--------
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index 9fc927d1e..6f5789bf5 100644
--- a/docs/resources/changelog.md
+++ b/docs/resources/changelog.md
@@ -16,6 +16,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Fixed a bug that prevented a number of properties, methods, etc. from being documented in `<sl-radio>` and `<sl-radio-button>`
 - Fixed a bug in `<sl-avatar>` that prevented valid images from showing after an invalid or missing image was provided [#717](https://github.com/shoelace-style/shoelace/issues/717)
 - Fixed a bug that resulted in a console error being thrown on keydown in `<sl-dropdown>` [#719](https://github.com/shoelace-style/shoelace/issues/719)
+- Fixed a bug that prevented `<sl-dropdown>` from being closed when opened initially [#720](https://github.com/shoelace-style/shoelace/issues/720)
 - Updated `<sl-tab-group>` and `<sl-menu>` to cycle through tabs and menu items instead of stopping at the first/last when using the keyboard
 - Removed path aliasing (again) because it doesn't work with Web Test Runner's esbuild plugin
 
diff --git a/src/components/dropdown/dropdown.ts b/src/components/dropdown/dropdown.ts
index 4e89d16ea..16e463fb7 100644
--- a/src/components/dropdown/dropdown.ts
+++ b/src/components/dropdown/dropdown.ts
@@ -106,12 +106,14 @@ export default class SlDropdown extends LitElement {
     // If the dropdown is visible on init, update its position
     if (this.open) {
       await this.updateComplete;
+      this.addOpenListeners();
       this.startPositioner();
     }
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
+    this.removeOpenListeners();
     this.hide();
     this.stopPositioner();
   }
@@ -338,6 +340,20 @@ export default class SlDropdown extends LitElement {
     this.updatePositioner();
   }
 
+  addOpenListeners() {
+    this.panel.addEventListener('sl-activate', this.handleMenuItemActivate);
+    this.panel.addEventListener('sl-select', this.handlePanelSelect);
+    document.addEventListener('keydown', this.handleDocumentKeyDown);
+    document.addEventListener('mousedown', this.handleDocumentMouseDown);
+  }
+
+  removeOpenListeners() {
+    this.panel.removeEventListener('sl-activate', this.handleMenuItemActivate);
+    this.panel.removeEventListener('sl-select', this.handlePanelSelect);
+    document.removeEventListener('keydown', this.handleDocumentKeyDown);
+    document.removeEventListener('mousedown', this.handleDocumentMouseDown);
+  }
+
   @watch('open', { waitUntilFirstUpdate: true })
   async handleOpenChange() {
     if (this.disabled) {
@@ -350,10 +366,7 @@ export default class SlDropdown extends LitElement {
     if (this.open) {
       // Show
       emit(this, 'sl-show');
-      this.panel.addEventListener('sl-activate', this.handleMenuItemActivate);
-      this.panel.addEventListener('sl-select', this.handlePanelSelect);
-      document.addEventListener('keydown', this.handleDocumentKeyDown);
-      document.addEventListener('mousedown', this.handleDocumentMouseDown);
+      this.addOpenListeners();
 
       await stopAnimations(this);
       this.startPositioner();
@@ -365,10 +378,7 @@ export default class SlDropdown extends LitElement {
     } else {
       // Hide
       emit(this, 'sl-hide');
-      this.panel.removeEventListener('sl-activate', this.handleMenuItemActivate);
-      this.panel.removeEventListener('sl-select', this.handlePanelSelect);
-      document.removeEventListener('keydown', this.handleDocumentKeyDown);
-      document.removeEventListener('mousedown', this.handleDocumentMouseDown);
+      this.removeOpenListeners();
 
       await stopAnimations(this);
       const { keyframes, options } = getAnimation(this, 'dropdown.hide');