feat: dispatch an event after overlay closing completed

packages/confirm-dialog/src/vaadin-confirm-dialog-overlay.js

@@ -82,18 +82,6 @@ class ConfirmDialogOverlay extends DialogOverlay {
     return memoizedTemplate;
   }
 
-  /**
-   * Override method inherited from `Overlay` to notify when overlay is closed.
-   * The `vaadin-overlay-close` event is not suitable, as it fires before closing.
-   * @protected
-   * @override
-   */
-  _finishClosing() {
-    super._finishClosing();
-
-    this.dispatchEvent(new CustomEvent('vaadin-confirm-dialog-close'));
-  }
-
   /**
    * @protected
    * @override

packages/confirm-dialog/src/vaadin-confirm-dialog.js

@@ -324,7 +324,7 @@ class ConfirmDialog extends ElementMixin(ThemePropertyMixin(ControllerMixin(Poly
     this._overlayElement = this.$.dialog.$.overlay;
     this._overlayElement.addEventListener('vaadin-overlay-escape-press', this._escPressed.bind(this));
     this._overlayElement.addEventListener('vaadin-overlay-open', () => this.__onDialogOpened());
-    this._overlayElement.addEventListener('vaadin-confirm-dialog-close', () => this.__onDialogClosed());
+    this._overlayElement.addEventListener('vaadin-overlay-closed', () => this.__onDialogClosed());
 
     this._headerController = new SlotController(this, 'header', 'h3', {
       initializer: (node) => {

packages/overlay/src/vaadin-overlay.d.ts

@@ -25,6 +25,11 @@ export type OverlayOpenEvent = CustomEvent;
  */
 export type OverlayCloseEvent = CustomEvent;
 
+/**
+ * Fired after the overlay is closed.
+ */
+export type OverlayClosedEvent = CustomEvent;
+
 /**
  * Fired when the overlay will be closed.
  */
@@ -46,6 +51,7 @@ export interface OverlayCustomEventMap {
   'opened-changed': OverlayOpenedChangedEvent;
   'vaadin-overlay-open': OverlayOpenEvent;
   'vaadin-overlay-close': OverlayCloseEvent;
+  'vaadin-overlay-closed': OverlayClosedEvent;
   'vaadin-overlay-closing': OverlayClosingEvent;
   'vaadin-overlay-outside-click': OverlayOutsideClickEvent;
   'vaadin-overlay-escape-press': OverlayEscapePressEvent;
@@ -108,6 +114,7 @@ export type OverlayEventMap = HTMLElementEventMap & OverlayCustomEventMap;
  * @fires {CustomEvent} vaadin-overlay-open - Fired after the overlay is opened.
  * @fires {CustomEvent} vaadin-overlay-close - Fired before the overlay will be closed. If canceled the closing of the overlay is canceled as well.
  * @fires {CustomEvent} vaadin-overlay-closing - Fired when the overlay will be closed.
+ * @fires {CustomEvent} vaadin-overlay-closed - Fired after the overlay is closed.
  * @fires {CustomEvent} vaadin-overlay-outside-click - Fired before the overlay will be closed on outside click. If canceled the closing of the overlay is canceled as well.
  * @fires {CustomEvent} vaadin-overlay-escape-press - Fired before the overlay will be closed on ESC button press. If canceled the closing of the overlay is canceled as well.
  */

packages/overlay/src/vaadin-overlay.js

@@ -67,6 +67,7 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  * @fires {CustomEvent} vaadin-overlay-open - Fired after the overlay is opened.
  * @fires {CustomEvent} vaadin-overlay-close - Fired before the overlay will be closed. If canceled the closing of the overlay is canceled as well.
  * @fires {CustomEvent} vaadin-overlay-closing - Fired when the overlay will be closed.
+ * @fires {CustomEvent} vaadin-overlay-closed - Fired after the overlay is closed.
  * @fires {CustomEvent} vaadin-overlay-outside-click - Fired before the overlay will be closed on outside click. If canceled the closing of the overlay is canceled as well.
  * @fires {CustomEvent} vaadin-overlay-escape-press - Fired before the overlay will be closed on ESC button press. If canceled the closing of the overlay is canceled as well.
  *
@@ -598,6 +599,7 @@ class Overlay extends ThemableMixin(DirMixin(ControllerMixin(PolymerElement))) {
     this._detachOverlay();
     this.$.overlay.style.removeProperty('pointer-events');
     this.removeAttribute('closing');
+    this.dispatchEvent(new CustomEvent('vaadin-overlay-closed'));
   }
 
   /**
@@ -793,6 +795,11 @@ class Overlay extends ThemableMixin(DirMixin(ControllerMixin(PolymerElement))) {
     this.style.zIndex = zIndex;
     this.__zIndex = zIndex || parseFloat(getComputedStyle(this).zIndex);
   }
+
+  /**
+   * @event vaadin-overlay-closed
+   * Fired after the overlay is closed.
+   */
 }
 
 customElements.define(Overlay.is, Overlay);

packages/overlay/test/overlay.test.js

@@ -299,6 +299,28 @@ describe('vaadin-overlay', () => {
       });
     });
 
+    describe('vaadin-overlay-closed event', () => {
+      it('should dispatch vaadin-overlay-closed after the overlay has closed', () => {
+        const closingSpy = sinon.spy();
+        overlay.addEventListener('vaadin-overlay-closing', closingSpy);
+
+        const closedSpy = sinon.spy();
+        overlay.addEventListener('vaadin-overlay-closed', closedSpy);
+
+        click(parent);
+        expect(closedSpy.calledOnce).to.be.true;
+        expect(closedSpy.calledAfter(closingSpy)).to.be.true;
+      });
+
+      it('should not dispatch vaadin-overlay-closed when preventing vaadin-overlay-close', () => {
+        const spy = sinon.spy();
+        overlay.addEventListener('vaadin-overlay-closed', spy);
+        overlay.addEventListener('vaadin-overlay-close', (e) => e.preventDefault());
+        click(parent);
+        expect(spy.called).to.be.false;
+      });
+    });
+
     describe('moving mouse pointer during click', () => {
       it('should close if both mousedown and mouseup outside', () => {
         mousedown(parent);