fixes #720

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
 

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');