Description
Description
During use of the UnderlineNav v2 component, it appears that the UnderlineNav.Item
can end up showing as being selected, while its prop aria-current
is set to undefined
or false
.
This may be caused by a race condition, as it seems to be triggered when moving between pages quickly / when rendering has not been completed.
Example of "Meta" not being selected and "Inputs" being selected:
Props showing that "Meta" item has aria-current
set to page
and should be selected:
Props showing that "Inputs" item has aria-current
set to false
and should not be selected:
Testing performed using React Primer v35.19.0 and Next.js v13.1.6 with wrapper component as detailed in: https://primer.style/react/drafts/UnderlineNav2#with-nextjs
Steps to reproduce
- Create page using https://primer.style/react/drafts/UnderlineNav2#with-nextjs template, with demanding components on each page being navigated between.
- Navigate between pages using a separate navigation mechanism (not by clicking
UnderlineNav.Item
). - Sometimes the
UnderlineNav.Item
will end up in the state where it is shown visually as being selected, while havingaria-current
set toundefined
orfalse
.
Expected behavior would be for the aria-current
and visual state of the UnderlineNav.Item
to always be in sync.
Version
v35.19.0
Browser
Chrome, Firefox