fix: preserve active attribute on menu-bar button while submenu is open (#11331) (CP: 25.0)

packages/menu-bar/src/vaadin-menu-bar-button.js

@@ -38,6 +38,21 @@ class MenuBarButton extends Button {
     this.__triggeredWithActiveKeys = null;
   }
 
+  /**
+   * Override to preserve the `active` attribute while the button's
+   * sub-menu is expanded, so that the pressed visual state remains.
+   *
+   * @param {boolean} active
+   * @protected
+   * @override
+   */
+  _setActive(active) {
+    if (!active && this.hasAttribute('expanded')) {
+      return;
+    }
+    super._setActive(active);
+  }
+
   /**
    * Override method inherited from `ButtonMixin` to allow keyboard navigation with
    * arrow keys in the menu bar when the button is focusable in the disabled state.

packages/menu-bar/test/sub-menu.test.js

@@ -473,6 +473,39 @@ describe('sub-menu', () => {
       expect(buttons[0].hasAttribute('expanded')).to.be.false;
     });
   });
+
+  describe('active attribute', () => {
+    it('should preserve active attribute on button while sub-menu is open on Enter', async () => {
+      enter(buttons[0]);
+      await nextRender();
+      expect(subMenu.opened).to.be.true;
+      expect(buttons[0].hasAttribute('active')).to.be.true;
+    });
+
+    it('should preserve active attribute on button while sub-menu is open on Space', async () => {
+      space(buttons[0]);
+      await nextRender();
+      expect(subMenu.opened).to.be.true;
+      expect(buttons[0].hasAttribute('active')).to.be.true;
+    });
+
+    it('should preserve active attribute on button while sub-menu is open on click', async () => {
+      buttons[0].click();
+      await nextRender();
+      expect(subMenu.opened).to.be.true;
+      expect(buttons[0].hasAttribute('active')).to.be.true;
+    });
+
+    it('should remove active attribute when sub-menu is closed', async () => {
+      buttons[0].click();
+      await nextRender();
+      expect(buttons[0].hasAttribute('active')).to.be.true;
+
+      buttons[0].click();
+      await nextRender();
+      expect(buttons[0].hasAttribute('active')).to.be.false;
+    });
+  });
 });
 
 describe('open on hover', () => {