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

Fix cancel event from within drawer or dialog triggering them to close (#1636)

Browse Source
This commit is contained in:
Jeremy Walton
2025-10-22 11:26:10 -04:00
committed by GitHub
parent 6dd1d6263c
commit 122ce96d26
4 changed files with 27 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
packages/webawesome/src/components/dialog/dialog.test.ts
View File

@@ -119,6 +119,19 @@ describe('<wa-dialog>', () => {
expect(el.open).to.be.true;
});
it('should not close when bubbled cancel event originates from within the drawer', async () => {
const el = await fixture<WaDialog>(html` <wa-dialog open><input type="file" /></wa-dialog> `);
const input = el.querySelector('input')!;
await clickOnElement(el); // Chromium wants the page to have been clicked prior to closing the dialog.
const cancelEvent = new Event('cancel', { bubbles: true });
input.dispatchEvent(cancelEvent);
await aTimeout(250);
expect(el.open).to.be.true;
});
it('should allow initial focus to be set', async () => {
const el = await fixture<WaDialog>(html` <wa-dialog><wa-input autofocus></wa-input></wa-dialog> `);
const input = el.querySelector('wa-input')!;

2
packages/webawesome/src/components/dialog/dialog.ts
View File

@@ -129,7 +129,7 @@ export default class WaDialog extends WebAwesomeElement {
private handleDialogCancel(event: Event) {
event.preventDefault();
if (!this.dialog.classList.contains('hide')) {
if (!this.dialog.classList.contains('hide') && event.target === this.dialog) {
this.requestClose(this.dialog);
}
}

12
packages/webawesome/src/components/drawer/drawer.test.ts
View File

@@ -115,6 +115,18 @@ describe('<wa-drawer>', () => {
expect(el.open).to.be.true;
});
it('should not close when bubbled cancel event originates from within the drawer', async () => {
const el = await fixture<WaDrawer>(html`<wa-drawer open><input type="file" /></wa-drawer>`);
const input = el.querySelector('input')!;
const cancelEvent = new Event('cancel', { bubbles: true });
input.dispatchEvent(cancelEvent);
await aTimeout(250);
expect(el.open).to.be.true;
});
it('should allow initial focus to be set', async () => {
const el = await fixture<WaDrawer>(html` <wa-drawer><wa-input autofocus></wa-input></wa-drawer> `);
const input = el.querySelector('wa-input')!;

2
packages/webawesome/src/components/drawer/drawer.ts
View File

@@ -141,7 +141,7 @@ export default class WaDrawer extends WebAwesomeElement {
private handleDialogCancel(event: Event) {
event.preventDefault();
if (!this.drawer.classList.contains('hide')) {
if (!this.drawer.classList.contains('hide') && event.target === this.drawer) {
this.requestClose(this.drawer);
}
}