From 1632da3c2a1edcf7d300e0fd32fc493a34960afc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fred=20Lef=C3=A9v=C3=A8re-Laoide?=
 <90181748+FredLL-Avaiga@users.noreply.github.com>
Date: Fri, 17 Jan 2025 09:16:52 +0100
Subject: [PATCH] Navbar: do not select the first value on unknown id (#2403)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

resolves #2401

Co-authored-by: Fred Lefévère-Laoide <Fred.Lefevere-Laoide@Taipy.io>
---
 .../taipy-gui/src/components/Taipy/NavBar.spec.tsx   | 12 ++++++------
 frontend/taipy-gui/src/components/Taipy/NavBar.tsx   |  4 +---
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/frontend/taipy-gui/src/components/Taipy/NavBar.spec.tsx b/frontend/taipy-gui/src/components/Taipy/NavBar.spec.tsx
index d2a46ec513..1ac5b19169 100644
--- a/frontend/taipy-gui/src/components/Taipy/NavBar.spec.tsx
+++ b/frontend/taipy-gui/src/components/Taipy/NavBar.spec.tsx
@@ -53,18 +53,18 @@ describe("NavBar Component", () => {
     });
     it("is disabled", async () => {
         const { getAllByRole } = render(<BrowserRouter><NavBar lov={lov} active={false} /></BrowserRouter>);
-        const elts = getAllByRole("tab");
-        elts.forEach(elt => expect(elt).toBeDisabled());
+        const tabElements = getAllByRole("tab");
+        tabElements.forEach(elt => expect(elt).toBeDisabled());
     });
     it("is enabled by default", async () => {
         const { getAllByRole } = render(<BrowserRouter><NavBar lov={lov} /></BrowserRouter>);
-        const elts = getAllByRole("tab");
-        elts.forEach(elt => expect(elt).not.toBeDisabled());
+        const tabElements = getAllByRole("tab");
+        tabElements.forEach(elt => expect(elt).not.toBeDisabled());
     });
     it("is enabled by active", async () => {
         const { getAllByRole } = render(<BrowserRouter><NavBar lov={lov} active={true} /></BrowserRouter>);
-        const elts = getAllByRole("tab");
-        elts.forEach(elt => expect(elt).not.toBeDisabled());
+        const tabElements = getAllByRole("tab");
+        tabElements.forEach(elt => expect(elt).not.toBeDisabled());
     });
     it("dispatch a well formed message", async () => {
         const focusSpy = jest.fn()
diff --git a/frontend/taipy-gui/src/components/Taipy/NavBar.tsx b/frontend/taipy-gui/src/components/Taipy/NavBar.tsx
index 9c55085f37..b2a563b4c9 100644
--- a/frontend/taipy-gui/src/components/Taipy/NavBar.tsx
+++ b/frontend/taipy-gui/src/components/Taipy/NavBar.tsx
@@ -66,9 +66,7 @@ const NavBar = (props: LovProps) => {
         [state.locations, navigate]
     );
 
-    const selectedVal =
-        lov.find((it) => getBaseURL() + it.id.substring(1) === location.pathname)?.id ||
-        (lov.length ? lov[0].id : false);
+    const selectedVal = lov.find((it) => getBaseURL() + it.id.substring(1) === location.pathname)?.id || "";
 
     return isMobile ? (
         <Tooltip title={hover || ""}>