NavList: Fix when subNav opens automatically and shows current indica…

…tor (#3611) * check current=false * Create tiny-numbers-sip.md
primer · Aug 14, 2023 · ace603d · ace603d
1 parent e6a0855
commit ace603d
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 2 deletions.
diff --git a/.changeset/tiny-numbers-sip.md b/.changeset/tiny-numbers-sip.md
@@ -0,0 +1,7 @@
+---
+"@primer/react": patch
+---
+
+NavList: Fix when subNav opens automatically and shows current indicator
+
+<!-- Changed components: NavList -->
diff --git a/src/NavList/NavList.stories.tsx b/src/NavList/NavList.stories.tsx
@@ -143,4 +143,50 @@ export const WithNextJSLink = () => (
   </PageLayout>
 )
 
+export const WithReloads: Story = () => {
+  // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
+  const location = window.location
+
+  const storyId = new URLSearchParams(location.search).get('id')
+  const urlBase = `${location.origin + location.pathname}?id=${storyId}`
+  const itemId = new URLSearchParams(location.search).get('itemId')
+
+  return (
+    <>
+      <PageLayout>
+        <PageLayout.Pane position="start">
+          <NavList>
+            <NavList.Item href={`${urlBase}&itemId=1`} aria-current={itemId === '1' ? 'page' : 'false'}>
+              Item 1
+            </NavList.Item>
+            <NavList.Item>
+              Item 2
+              <NavList.SubNav>
+                <NavList.Item href={`${urlBase}&itemId=2.1`} aria-current={itemId === '2.1' ? 'page' : 'false'}>
+                  Sub item 2.1
+                </NavList.Item>
+                <NavList.Item href={`${urlBase}&itemId=2.2`} aria-current={itemId === '2.2' ? 'page' : 'false'}>
+                  Sub item 2.2
+                </NavList.Item>
+              </NavList.SubNav>
+            </NavList.Item>
+            <NavList.Item>
+              Item 3
+              <NavList.SubNav>
+                <NavList.Item href={`${urlBase}&itemId=3.1`} aria-current={itemId === '3.1' ? 'page' : 'false'}>
+                  Sub item 3.1
+                </NavList.Item>
+                <NavList.Item href={`${urlBase}&itemId=3.2`} aria-current={itemId === '3.2' ? 'page' : 'false'}>
+                  Sub item 3.2
+                </NavList.Item>
+              </NavList.SubNav>
+            </NavList.Item>
+          </NavList>
+        </PageLayout.Pane>
+        <PageLayout.Content></PageLayout.Content>
+      </PageLayout>
+    </>
+  )
+}
+
 export default meta
diff --git a/src/NavList/NavList.tsx b/src/NavList/NavList.tsx
@@ -116,8 +116,10 @@ function ItemWithSubNav({children, subNav, depth, sx: sxProp = defaultSxProp}: I
   useIsomorphicLayoutEffect(() => {
     if (subNavRef.current) {
       // Check if SubNav contains current item
-      const currentItem = subNavRef.current.querySelector('[aria-current]')
-      if (currentItem && currentItem.getAttribute('aria-current') !== 'false') {
+      // valid values: page, step, location, date, time, true and false
+      const currentItem = subNavRef.current.querySelector('[aria-current]:not([aria-current=false])')
+
+      if (currentItem) {
         setContainsCurrentItem(true)
         setIsOpen(true)
       }