From 1e243e4257610f6652b47ee53ab4d17c61eba2e1 Mon Sep 17 00:00:00 2001
From: Stephen Sugden <grncdr@users.noreply.github.com>
Date: Tue, 18 Jul 2023 17:57:16 +0200
Subject: [PATCH] Move keydown handler for sl-drawer back to base div (#1459)

* Move keydown handler for sl-drawer back to base div

This restores the stacking behaviour of drawers

See: #1457

* Autofocus panel of sl-drawer when it is open on firstUpdate
---
 src/components/drawer/drawer.ts | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/drawer/drawer.ts b/src/components/drawer/drawer.ts
index 3971a7880..9e10c8bda 100644
--- a/src/components/drawer/drawer.ts
+++ b/src/components/drawer/drawer.ts
@@ -120,6 +120,10 @@ export default class SlDrawer extends ShoelaceElement {
         lockBodyScrolling(this);
       }
     }
+    // If there is an autofocus element, let it take focuse normally, otherwise focus the panel.
+    if (!this.querySelector('[autofocus]')) {
+      this.panel.focus({ preventScroll: true });
+    }
   }
 
   disconnectedCallback() {
@@ -143,14 +147,14 @@ export default class SlDrawer extends ShoelaceElement {
   }
 
   private addOpenListeners() {
-    document.addEventListener('keydown', this.handleDocumentKeyDown);
+    this.drawer.addEventListener('keydown', this.handleKeyDown);
   }
 
   private removeOpenListeners() {
-    document.removeEventListener('keydown', this.handleDocumentKeyDown);
+    this.drawer.removeEventListener('keydown', this.handleKeyDown);
   }
 
-  private handleDocumentKeyDown = (event: KeyboardEvent) => {
+  private handleKeyDown = (event: KeyboardEvent) => {
     if (this.open && !this.contained && event.key === 'Escape') {
       event.stopPropagation();
       this.requestClose('keyboard');
@@ -307,6 +311,7 @@ export default class SlDrawer extends ShoelaceElement {
           'drawer--rtl': this.localize.dir() === 'rtl',
           'drawer--has-footer': this.hasSlotController.test('footer')
         })}
+        @keydown=${this.handleKeyDown}
       >
         <div part="overlay" class="drawer__overlay" @click=${() => this.requestClose('overlay')} tabindex="-1"></div>