diff --git a/packages/webawesome/src/components/dialog/dialog.test.ts b/packages/webawesome/src/components/dialog/dialog.test.ts
index f75d1eef7..ab0a446d5 100644
--- a/packages/webawesome/src/components/dialog/dialog.test.ts
+++ b/packages/webawesome/src/components/dialog/dialog.test.ts
@@ -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')!;
diff --git a/packages/webawesome/src/components/dialog/dialog.ts b/packages/webawesome/src/components/dialog/dialog.ts
index 297f498df..4d0259a99 100644
--- a/packages/webawesome/src/components/dialog/dialog.ts
+++ b/packages/webawesome/src/components/dialog/dialog.ts
@@ -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);
     }
   }
diff --git a/packages/webawesome/src/components/drawer/drawer.test.ts b/packages/webawesome/src/components/drawer/drawer.test.ts
index d2f48e21b..e3e0e031d 100644
--- a/packages/webawesome/src/components/drawer/drawer.test.ts
+++ b/packages/webawesome/src/components/drawer/drawer.test.ts
@@ -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')!;
diff --git a/packages/webawesome/src/components/drawer/drawer.ts b/packages/webawesome/src/components/drawer/drawer.ts
index c13b8a52f..15131dccd 100644
--- a/packages/webawesome/src/components/drawer/drawer.ts
+++ b/packages/webawesome/src/components/drawer/drawer.ts
@@ -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);
     }
   }