feat: close menu-bar programmatically (#7102)

vaadin · Jan 24, 2024 · 475c3aa · 475c3aa
1 parent 12359cb
commit 475c3aa
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 1 deletion.
diff --git a/packages/menu-bar/src/vaadin-menu-bar-mixin.d.ts b/packages/menu-bar/src/vaadin-menu-bar-mixin.d.ts
@@ -138,6 +138,11 @@ export declare class MenuBarMixinClass {
    */
   openOnHover: boolean | null | undefined;
 
+  /**
+   * Closes the current submenu.
+   */
+  close(): void;
+
   protected readonly _buttons: HTMLElement[];
 
   protected readonly _container: HTMLElement;

diff --git a/packages/menu-bar/src/vaadin-menu-bar-mixin.js b/packages/menu-bar/src/vaadin-menu-bar-mixin.js
@@ -908,11 +908,18 @@ export const MenuBarMixin = (superClass) =>
      * @param {boolean} restoreFocus
      * @protected
      */
-    _close(restoreFocus) {
+    _close(restoreFocus = false) {
       this.style.pointerEvents = '';
       this.__deactivateButton(restoreFocus);
       if (this._subMenu.opened) {
         this._subMenu.close();
       }
     }
+
+    /**
+     * Closes the current submenu.
+     */
+    close() {
+      this._close();
+    }
   };
diff --git a/packages/menu-bar/test/overflow.test.js b/packages/menu-bar/test/overflow.test.js
@@ -432,6 +432,15 @@ describe('overflow', () => {
       expect(subMenu.opened).to.be.false;
     });
 
+    it('should close the overflow sub-menu programmatically', async () => {
+      overflow.click();
+      await nextRender(subMenu);
+      expect(subMenu.opened).to.be.true;
+
+      menu.close();
+      expect(subMenu.opened).to.be.false;
+    });
+
     it('should teleport the same component to overflow sub-menu and back', async () => {
       overflow.click();
       await nextRender(subMenu);

diff --git a/packages/menu-bar/test/sub-menu.test.js b/packages/menu-bar/test/sub-menu.test.js
@@ -283,6 +283,15 @@ describe('sub-menu', () => {
     expect(spy.firstCall.args[0].detail.value).to.deep.equal({ text: 'Menu Item 1 1' });
   });
 
+  it('should close sub-menu programmatically', async () => {
+    buttons[0].click();
+    await nextRender(subMenu);
+    expect(subMenu.opened).to.be.true;
+
+    menu.close();
+    expect(subMenu.opened).to.be.false;
+  });
+
   it('should not close submenu on item contextmenu event', async () => {
     buttons[0].click();
     await nextRender(subMenu);