diff --git a/.changeset/tiny-numbers-sip.md b/.changeset/tiny-numbers-sip.md new file mode 100644 index 00000000000..4778ae70452 --- /dev/null +++ b/.changeset/tiny-numbers-sip.md @@ -0,0 +1,7 @@ +--- +"@primer/react": patch +--- + +NavList: Fix when subNav opens automatically and shows current indicator + + diff --git a/src/NavList/NavList.stories.tsx b/src/NavList/NavList.stories.tsx index 91286257310..5baf3de9793 100644 --- a/src/NavList/NavList.stories.tsx +++ b/src/NavList/NavList.stories.tsx @@ -143,4 +143,50 @@ export const WithNextJSLink = () => ( ) +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 ( + <> + + + + + Item 1 + + + Item 2 + + + Sub item 2.1 + + + Sub item 2.2 + + + + + Item 3 + + + Sub item 3.1 + + + Sub item 3.2 + + + + + + + + + ) +} + export default meta diff --git a/src/NavList/NavList.tsx b/src/NavList/NavList.tsx index a90a849f64e..591b75a08f7 100644 --- 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) }