feat: fire closed event after closing animation has finished (#9874)

Author: sissbruecker

packages/context-menu/src/vaadin-context-menu-mixin.js

@@ -209,6 +209,14 @@ export const ContextMenuMixin = (superClass) =>
       this.__forwardFocus();
     }
 
+    /**
+     * Runs after overlay's closing animation is finished
+     * @private
+     */
+    _onVaadinOverlayClosed() {
+      this.dispatchEvent(new CustomEvent('closed'));
+    }
+
     /** @private */
     _targetOrOpenOnChanged(listenOn, openOn) {
       if (this._oldListenOn && this._oldOpenOn) {
@@ -641,4 +649,10 @@ export const ContextMenuMixin = (superClass) =>
         this.close();
       }
     }
+
+    /**
+     * Fired when the context menu is closed.
+     *
+     * @event closed
+     */
   };

packages/context-menu/src/vaadin-context-menu.d.ts

@@ -34,6 +34,11 @@ export type ContextMenuItemSelectedEvent<TItem extends ContextMenuItem = Context
   value: TItem;
 }>;
 
+/**
+ * Fired when the context menu is closed.
+ */
+export type ContextMenuClosedEvent = CustomEvent;
+
 export interface ContextMenuCustomEventMap<TItem extends ContextMenuItem = ContextMenuItem> {
   'opened-changed': ContextMenuOpenedChangedEvent;
 
@@ -42,6 +47,8 @@ export interface ContextMenuCustomEventMap<TItem extends ContextMenuItem = Conte
   'close-all-menus': Event;
 
   'items-outside-click': Event;
+
+  closed: ContextMenuClosedEvent;
 }
 
 export interface ContextMenuEventMap<TItem extends ContextMenuItem = ContextMenuItem>
@@ -237,6 +244,7 @@ export interface ContextMenuEventMap<TItem extends ContextMenuItem = ContextMenu
  *
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
  * @fires {CustomEvent} item-selected - Fired when an item is selected when the context menu is populated using the `items` API.
+ * @fires {CustomEvent} closed - Fired when the context menu is closed.
  */
 declare class ContextMenu<TItem extends ContextMenuItem = ContextMenuItem> extends HTMLElement {
   addEventListener<K extends keyof ContextMenuEventMap>(

packages/context-menu/src/vaadin-context-menu.js

@@ -205,6 +205,7 @@ import { ContextMenuMixin } from './vaadin-context-menu-mixin.js';
  *
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
  * @fires {CustomEvent} item-selected - Fired when an item is selected when the context menu is populated using the `items` API.
+ * @fires {CustomEvent} closed - Fired when the context menu is closed.
  *
  * @customElement
  * @extends HTMLElement
@@ -249,6 +250,7 @@ class ContextMenu extends ContextMenuMixin(
         exportparts="backdrop, overlay, content"
         @opened-changed="${this._onOverlayOpened}"
         @vaadin-overlay-open="${this._onVaadinOverlayOpen}"
+        @vaadin-overlay-closed="${this._onVaadinOverlayClosed}"
       >
         <slot name="overlay"></slot>
         <slot name="submenu" slot="submenu"></slot>

packages/context-menu/test/overlay.test.js

@@ -394,6 +394,14 @@ describe('overlay', () => {
       expect(menu.opened).to.eql(true);
     });
 
+    it('should dispatch closed event when the overlay is closed', async () => {
+      const closedSpy = sinon.spy();
+      menu.addEventListener('closed', closedSpy);
+      fire(document.body, 'click');
+      await nextRender();
+      expect(closedSpy.calledOnce).to.be.true;
+    });
+
     describe('with shift key', () => {
       it('should not close on menu contextmenu', () => {
         const e = contextmenu(0, 0, true, overlay);

packages/context-menu/test/typings/context-menu.types.ts

@@ -7,6 +7,7 @@ import type { ContextMenuItem } from '../../src/vaadin-context-menu-item.js';
 import type { ContextMenuListBox } from '../../src/vaadin-context-menu-list-box.js';
 import type {
   ContextMenu,
+  ContextMenuClosedEvent,
   ContextMenuItem as MenuItem,
   ContextMenuItemSelectedEvent,
   ContextMenuOpenedChangedEvent,
@@ -36,6 +37,10 @@ menu.addEventListener('item-selected', (event) => {
   assertType<MenuItem>(event.detail.value);
 });
 
+menu.addEventListener('closed', (event) => {
+  assertType<ContextMenuClosedEvent>(event);
+});
+
 const renderer: ContextMenuRenderer = (root, contextMenu, context) => {
   assertType<HTMLElement>(root);
   assertType<ContextMenu>(contextMenu);