From 0efb494b82312afd21468b548d89af464567286f Mon Sep 17 00:00:00 2001
From: Marek Mihok <marek.mihok@h2o.ai>
Date: Wed, 25 Oct 2023 13:00:49 -0700
Subject: [PATCH] chore: render hashless name as a button #1932

---
 ui/src/nav.test.tsx                   | 12 ++++++++++++
 ui/src/nav.tsx                        |  9 +++++----
 website/widgets/content/navigation.md |  4 ----
 3 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/ui/src/nav.test.tsx b/ui/src/nav.test.tsx
index 20c4f66aa0..f2019a8065 100644
--- a/ui/src/nav.test.tsx
+++ b/ui/src/nav.test.tsx
@@ -145,6 +145,18 @@ describe('Nav.tsx', () => {
     expect(windowOpenMock).toHaveBeenCalled()
   })
 
+  it('Does not set args when link is opened in a new window', () => {
+    const pushMock = jest.fn()
+    const { getByTitle } = render(<View {...navProps} />)
+
+    wave.push = pushMock
+
+    fireEvent.click(getByTitle('Nav 1'), { ctrlKey: true, metaKey: true })
+
+    expect(wave.args['nav1']).not.toBe(true)
+    expect(pushMock).not.toHaveBeenCalled()
+  })
+
   describe('Value update', () => {
     it('Sets args on value update', () => {
       const props: T.Model<State> = { ...navProps, state: { items } }
diff --git a/ui/src/nav.tsx b/ui/src/nav.tsx
index 57190cbd04..30f2a71df5 100644
--- a/ui/src/nav.tsx
+++ b/ui/src/nav.tsx
@@ -121,8 +121,7 @@ export const
     const
       getUrl = (name: S) => {
         const { origin, pathname } = window.location
-        const hash = name.startsWith('#') ? name : ''
-        return origin + pathname + hash
+        return name.startsWith('#') ? origin + pathname + name : ''
       },
       groups = items.map((g): Fluent.INavLinkGroup => ({
         name: g.label,
@@ -138,12 +137,14 @@ export const
             marginTop: !linksOnly && idx === 0 && !g.label ? 30 : undefined
           },
           url: path || getUrl(name),
-          target: path ? '_blank' : undefined,
           onClick: (ev) => {
+            ev?.preventDefault()
             if (ev?.ctrlKey || ev?.metaKey) return
             valueB(name)
             if (hideNav) hideNav()
-            if (!path && !name.startsWith('#')) {
+            if (path) window.open(path, "_blank")
+            else if (name.startsWith('#')) window.location.hash = name.substring(1)
+            else {
               wave.args[name] = true
               wave.push()
             }
diff --git a/website/widgets/content/navigation.md b/website/widgets/content/navigation.md
index 69fb935c12..43d4db18f0 100644
--- a/website/widgets/content/navigation.md
+++ b/website/widgets/content/navigation.md
@@ -9,10 +9,6 @@ If the app content is taller than wider, it might be a good idea to save a bit o
 
 Check the full API at [ui.nav_card](/docs/api/ui#nav_card).
 
-:::caution
-Keep in mind that opening the navigation link in a new tab or window creates [a new client](/docs/state) so any client state info is lost.
-:::
-
 ## Basic nav
 
 ```py