UI: close the bottom bar more menu on a second tab click (#32435)

assets/js/components/BottomTabs/MoreItem.vue

@@ -98,10 +98,22 @@ export default defineComponent({
 			return "bg-darker-green";
 		},
 	},
+	mounted() {
+		document.addEventListener("click", this.closeOnClickOutside, true);
+	},
+	unmounted() {
+		document.removeEventListener("click", this.closeOnClickOutside, true);
+	},
 	methods: {
 		toggleMenu() {
 			this.open = !this.open;
 		},
+		// the tab item wraps both toggle and menu, clicks inside are handled by them
+		closeOnClickOutside(e: MouseEvent) {
+			if (this.open && !this.$el.contains(e.target as Node)) {
+				this.open = false;
+			}
+		},
 	},
 });
 </script>

assets/js/components/BottomTabs/MoreMenu.vue

@@ -115,10 +115,7 @@ export default defineComponent({
 	},
 	emits: ["close"],
 	data() {
-		return {
-			isApp: isApp(),
-			onClickOutside: undefined as ((e: MouseEvent) => void) | undefined,
-		};
+		return { isApp: isApp() };
 	},
 	computed: {
 		providers() {
@@ -168,19 +165,6 @@ export default defineComponent({
 			return Object.keys(this.vehicles).length > 0;
 		},
 	},
-	mounted() {
-		this.onClickOutside = (e: MouseEvent) => {
-			if (this.open && !this.$el.contains(e.target as Node)) {
-				this.$emit("close");
-			}
-		};
-		document.addEventListener("click", this.onClickOutside, true);
-	},
-	unmounted() {
-		if (this.onClickOutside) {
-			document.removeEventListener("click", this.onClickOutside, true);
-		}
-	},
 	methods: {
 		handleAuthRequired() {
 			this.$router.push({ path: "/config" });

tests/navigation.spec.ts

@@ -30,9 +30,16 @@ test.describe("bottom navigation", async () => {
     await expect(tabMore).toBeVisible();
     await expect(tabBattery).toHaveCount(0);
 
+    // more menu opens and closes on the same tab
+    const configLink = tabMore.getByRole("link", { name: "Configuration" });
+    await tabMore.click();
+    await expect(configLink).toBeVisible();
+    await tabMore.click();
+    await expect(configLink).not.toBeVisible();
+
     // navigate to config via More menu
     await tabMore.click();
-    await tabMore.getByRole("link", { name: "Configuration" }).click();
+    await configLink.click();
     await expect(page.getByRole("heading", { name: "Configuration" })).toBeVisible();
 
     // create battery meter