FIX: Close user menu on navigation (#26131)

app/assets/javascripts/discourse/app/components/user-menu/menu.js

@@ -8,6 +8,7 @@ import UserMenuTab, { CUSTOM_TABS_CLASSES } from "discourse/lib/user-menu/tab";
 import { NO_REMINDER_ICON } from "discourse/models/bookmark";
 import deprecated from "discourse-common/lib/deprecated";
 import getUrl from "discourse-common/lib/get-url";
+import { bind } from "discourse-common/utils/decorators";
 import UserMenuBookmarksList from "./bookmarks-list";
 import UserMenuLikesNotificationsList from "./likes-notifications-list";
 import UserMenuMessagesList from "./messages-list";
@@ -187,15 +188,31 @@ function resolvePanelComponent(owner, panelComponent) {
 }
 
 export default class UserMenu extends Component {
-  @service currentUser;
-  @service siteSettings;
-  @service site;
   @service appEvents;
+  @service currentUser;
+  @service router;
+  @service site;
+  @service siteSettings;
 
   @tracked currentTabId = DEFAULT_TAB_ID;
   @tracked currentPanelComponent = DEFAULT_PANEL_COMPONENT;
   @tracked currentNotificationTypes;
 
+  constructor() {
+    super(...arguments);
+    this.router.on("routeDidChange", this.onRouteChange);
+  }
+
+  willDestroy() {
+    super.willDestroy(...arguments);
+    this.router.off("routeDidChange", this.onRouteChange);
+  }
+
+  @bind
+  onRouteChange() {
+    this.args.closeUserMenu();
+  }
+
   get classNames() {
     let classes = ["user-menu", "revamped", "menu-panel", "drop-down"];
     if (this.siteSettings.show_user_menu_avatars) {

app/assets/javascripts/discourse/tests/acceptance/user-menu-test.js

@@ -1,5 +1,11 @@
 import { later } from "@ember/runloop";
-import { click, currentURL, triggerKeyEvent, visit } from "@ember/test-helpers";
+import {
+  click,
+  currentRouteName,
+  currentURL,
+  triggerKeyEvent,
+  visit,
+} from "@ember/test-helpers";
 import { test } from "qunit";
 import { Promise } from "rsvp";
 import DButton from "discourse/components/d-button";
@@ -872,6 +878,16 @@ acceptance("User menu", function (needs) {
       "the other notifications panel can display using keyboard navigation"
     );
   });
+
+  test("closes the menu when navigating away", async function (assert) {
+    await visit("/");
+    await click(".d-header-icons .current-user");
+    await click("#user-menu-button-profile");
+    await click(".quick-access-panel .preferences a");
+
+    assert.dom(".user-menu").doesNotExist();
+    assert.strictEqual(currentRouteName(), "preferences.account");
+  });
 });
 
 acceptance("User menu - Dismiss button", function (needs) {