fixes #990

docs/components/dialog.md

@@ -5,8 +5,12 @@
 [component-header:sl-dialog]
 
 ```html preview
-<sl-dialog label="Dialog" class="dialog-overview">
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+<sl-dialog label="Please select" class="dialog-overview">
+  <sl-select>
+    <sl-menu-item value="1">Option 1</sl-menu-item>
+    <sl-menu-item value="2">Option 2</sl-menu-item>
+    <sl-menu-item value="3">Option 3</sl-menu-item>
+  </sl-select>
   <sl-button slot="footer" variant="primary">Close</sl-button>
 </sl-dialog>
 
@@ -22,28 +26,6 @@
 </script>
 ```
 
-```jsx react
-import { useState } from 'react';
-import { SlButton, SlDialog } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <>
-      <SlDialog label="Dialog" open={open} onSlAfterHide={() => setOpen(false)}>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-        <SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
-          Close
-        </SlButton>
-      </SlDialog>
-
-      <SlButton onClick={() => setOpen(true)}>Open Dialog</SlButton>
-    </>
-  );
-};
-```
-
 ## UX Tips
 
 - Use a dialog when you immediately require the user's attention, e.g. confirming a destructive action.

docs/resources/changelog.md

@@ -19,6 +19,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Fixed a bug in `<sl-button-group>` where the inner border disappeared on focus [#980](https://github.com/shoelace-style/shoelace/pull/980)
 - Fixed a bug that caused prefix/suffix animations in `<sl-input>` to wobble [#996](https://github.com/shoelace-style/shoelace/issues/996)
 - Fixed a bug in `<sl-icon>` that prevented color from being set on the host element [#999](https://github.com/shoelace-style/shoelace/issues/999)
+- Fixed a bug in `<sl-dropdown>` where the `keydown` event erroneously propagated to ancestors when pressing <kbd>Escape</kbd> [#990](https://github.com/shoelace-style/shoelace/issues/990)
 - Improved `<sl-badge>` to improve padding and render relative to the current font size
 - Updated Lit to 2.4.1
 - Updated TypeScript to 4.8.4

src/components/dropdown/dropdown.test.ts

@@ -284,4 +284,27 @@ describe('<sl-dropdown>', () => {
 
     expect(el.open).to.be.false;
   });
+
+  it('should close and stop propagating the keydown event when Escape is pressed and the dropdown is open ', async () => {
+    const el = await fixture<SlDropdown>(html`
+      <sl-dropdown open>
+        <sl-button slot="trigger" caret>Toggle</sl-button>
+        <sl-menu>
+          <sl-menu-item>Dropdown Item 1</sl-menu-item>
+          <sl-menu-item>Dropdown Item 2</sl-menu-item>
+          <sl-menu-item>Dropdown Item 3</sl-menu-item>
+        </sl-menu>
+      </sl-dropdown>
+    `);
+    const firstMenuItem = el.querySelector('sl-menu-item')!;
+    const hideHandler = sinon.spy();
+
+    document.body.addEventListener('keydown', hideHandler);
+    firstMenuItem.focus();
+    await sendKeys({ press: 'Escape' });
+    await el.updateComplete;
+
+    expect(el.open).to.be.false;
+    expect(hideHandler).to.not.have.been.called;
+  });
 });

src/components/dropdown/dropdown.ts

@@ -100,6 +100,7 @@ export default class SlDropdown extends ShoelaceElement {
     super.connectedCallback();
     this.handleMenuItemActivate = this.handleMenuItemActivate.bind(this);
     this.handlePanelSelect = this.handlePanelSelect.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
     this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
     this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
 
@@ -139,14 +140,17 @@ export default class SlDropdown extends ShoelaceElement {
       | undefined;
   }
 
-  handleDocumentKeyDown(event: KeyboardEvent) {
-    // Close when escape is pressed
-    if (event.key === 'Escape') {
+  handleKeyDown(event: KeyboardEvent) {
+    // Close when escape is pressed inside an open dropdown. We need to listen on the panel itself and stop propagation
+    // in case any ancestors are also listening for this key.
+    if (this.open && event.key === 'Escape') {
+      event.stopPropagation();
       this.hide();
       this.focusOnTrigger();
-      return;
     }
+  }
 
+  handleDocumentKeyDown(event: KeyboardEvent) {
     // Handle tabbing
     if (event.key === 'Tab') {
       // Tabbing within an open menu should close the dropdown and refocus the trigger
@@ -341,6 +345,7 @@ export default class SlDropdown extends ShoelaceElement {
   addOpenListeners() {
     this.panel.addEventListener('sl-activate', this.handleMenuItemActivate);
     this.panel.addEventListener('sl-select', this.handlePanelSelect);
+    this.panel.addEventListener('keydown', this.handleKeyDown);
     document.addEventListener('keydown', this.handleDocumentKeyDown);
     document.addEventListener('mousedown', this.handleDocumentMouseDown);
   }
@@ -349,6 +354,7 @@ export default class SlDropdown extends ShoelaceElement {
     if (this.panel) {
       this.panel.removeEventListener('sl-activate', this.handleMenuItemActivate);
       this.panel.removeEventListener('sl-select', this.handlePanelSelect);
+      this.panel.removeEventListener('keydown', this.handleKeyDown);
     }
     document.removeEventListener('keydown', this.handleDocumentKeyDown);
     document.removeEventListener('mousedown', this.handleDocumentMouseDown);