Merge pull request #478 from Refinitiv/bugfix/cancel-event-does-not-fire

fix(dialog): the cancel event does not fire
Refinitiv · Oct 7, 2022 · 6df4d0e · 6df4d0e
2 parents 13bbb34 + f4af3c2
commit 6df4d0e
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 6 deletions.
diff --git a/packages/elements/src/dialog/__test__/dialog.test.js b/packages/elements/src/dialog/__test__/dialog.test.js
@@ -1,4 +1,4 @@
-import { elementUpdated, expect, fixture, oneEvent } from '@refinitiv-ui/test-helpers';
+import { elementUpdated, expect, fixture, oneEvent, keyboardEvent } from '@refinitiv-ui/test-helpers';
 // import element and theme
 import '@refinitiv-ui/elements/dialog';
 import { MAIN_MOUSE_BUTTON } from '../../../lib/dialog/draggable-element.js';
@@ -70,6 +70,37 @@ describe('dialog/Dialog', () => {
       await oneEvent(el, 'cancel');
       expect(el.opened).to.equal(false);
     });
+
+    it('Should fire cancel event on press esc key', async () => {
+      const el = await fixture('<ef-dialog></ef-dialog>');
+      el.opened = true;
+      await elementUpdated(el);
+      const keyUpEvent = keyboardEvent('keydown', { key: 'Esc' });
+      setTimeout(() => el.dispatchEvent(keyUpEvent));
+      await oneEvent(el, 'cancel');
+      expect(el.opened).to.equal(false);
+    });
+
+    it('Should fire cancel event on tap the backdrop if enabled canceling on outside click', async () => {
+      const el = await fixture('<ef-dialog></ef-dialog>');
+      el.opened = true;
+      el.noCancelOnOutsideClick = false;
+      await elementUpdated(el);
+      setTimeout(() => document.dispatchEvent(new CustomEvent('tapstart')));
+      await oneEvent(el, 'cancel');
+      expect(el.opened).to.equal(false);
+    });
+
+    it('Should not close the dialog if set prevent default to the cancel event', async () => {
+      const el = await fixture('<ef-dialog></ef-dialog>');
+      el.opened = true;
+      el.noCancelOnOutsideClick = false;
+      await elementUpdated(el);
+      el.addEventListener('cancel', event => event.preventDefault());
+      setTimeout(() => document.dispatchEvent(new CustomEvent('tapstart')));
+      await oneEvent(el, 'cancel');
+      expect(el.opened).to.equal(true);
+    });
   });
 
   describe('Draggable Element Behavior', () => {

diff --git a/packages/elements/src/dialog/index.ts b/packages/elements/src/dialog/index.ts
@@ -148,6 +148,14 @@ export class Dialog extends Overlay {
   @query('[part=footer]')
   private footerElement!: HTMLElement;
 
+  /**
+   * Flag to say whether the dialog has been confirmed and closed.
+   */
+  protected confirmed = false;
+
+  /**
+   * Close dialog when user clicked outside the dialog
+   */
   public noCancelOnOutsideClick = true;
 
   /**
@@ -296,19 +304,35 @@ export class Dialog extends Overlay {
    * @returns {void}
    */
   protected defaultConfirm (): void {
-    if (this.fireCancelOrConfirmEvent(true)) {
-      this.setOpened(false);
-    }
+    this.confirmed = true;
+    this.setOpened(false);
   }
 
   /**
    * Default handler for cancel click
    * @returns {void}
    */
   protected defaultCancel (): void {
-    if (this.fireCancelOrConfirmEvent(false)) {
-      this.setOpened(false);
+    this.confirmed = false;
+    this.setOpened(false);
+  }
+
+  /**
+   * Make sure that confirm/cancel events are fired appropriately
+   * All internal opened set events can be stoppable externally
+   * Use this instead of setting opened directly
+   * @param opened True if opened
+   * @returns {void}
+   */
+  protected override setOpened (opened: boolean): void {
+    if (!opened) {
+      // if default is prevented, do not proceed to closed
+      if (!this.fireCancelOrConfirmEvent(this.confirmed)) {
+        return;
+      }
     }
+
+    super.setOpened(opened);
   }
 
   /**