chore: render hashless name as a button #1932

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 } }

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()
             }

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