js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Move keydown handler for sl-drawer back to base div (#1459)

Browse Source 
* 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
This commit is contained in:
Stephen Sugden
2023-07-18 17:57:16 +02:00
committed by GitHub
parent 0b6c3a46cf
commit 1e243e4257
1 changed files with 8 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/drawer/drawer.ts
View File

@@ -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>