Don't use navigation history when using tabs (#29791)

src/layouts/hass-tabs-subpage.ts

@@ -5,7 +5,8 @@ import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
 import { canShowPage } from "../common/config/can_show_page";
 import { restoreScroll } from "../common/decorators/restore-scroll";
-import { goBack } from "../common/navigate";
+import { isNavigationClick } from "../common/dom/is-navigation-click";
+import { goBack, navigate } from "../common/navigate";
 import type { LocalizeFunc } from "../common/translations/localize";
 import "../components/ha-icon-button-arrow-prev";
 import "../components/ha-menu-button";
@@ -14,6 +15,11 @@ import "../components/ha-tab";
 import { haStyleScrollbar } from "../resources/styles";
 import type { HomeAssistant, Route } from "../types";
 
+const normalizePathname = (pathname: string): string =>
+  pathname.endsWith("/") && pathname.length > 1
+    ? pathname.slice(0, -1)
+    : pathname;
+
 export interface PageNavigation {
   path: string;
   translationKey?: string;
@@ -88,7 +94,7 @@ class HassTabsSubpage extends LitElement {
 
       return shownTabs.map(
         (page) => html`
-          <a href=${page.path}>
+          <a href=${page.path} @click=${this._tabClicked}>
             <ha-tab
               .hass=${this.hass}
               .active=${page.path === activeTab?.path}
@@ -112,8 +118,9 @@ class HassTabsSubpage extends LitElement {
 
   public willUpdate(changedProperties: PropertyValues) {
     if (changedProperties.has("route")) {
+      const currentPath = `${this.route.prefix}${this.route.path}`;
       this._activeTab = this.tabs.find((tab) =>
-        `${this.route.prefix}${this.route.path}`.includes(tab.path)
+        this._isActiveTabPath(tab.path, currentPath)
       );
     }
     super.willUpdate(changedProperties);
@@ -209,6 +216,36 @@ class HassTabsSubpage extends LitElement {
     goBack();
   }
 
+  private _isActiveTabPath(tabPath: string, currentPath: string): boolean {
+    try {
+      const tabUrl = new URL(tabPath, window.location.origin);
+      const currentUrl = new URL(currentPath, window.location.origin);
+
+      const tabPathname = normalizePathname(tabUrl.pathname);
+      const currentPathname = normalizePathname(currentUrl.pathname);
+
+      if (
+        currentPathname === tabPathname ||
+        currentPathname.startsWith(`${tabPathname}/`)
+      ) {
+        return true;
+      }
+
+      return false;
+    } catch (_err) {
+      return currentPath === tabPath || currentPath.startsWith(`${tabPath}/`);
+    }
+  }
+
+  private async _tabClicked(ev: MouseEvent): Promise<void> {
+    const href = isNavigationClick(ev);
+    if (!href) {
+      return;
+    }
+
+    await navigate(href, { replace: true });
+  }
+
   static get styles(): CSSResultGroup {
     return [
       haStyleScrollbar,