Skip to content

UnderlineNav v2 item can enter a selected non-current state #2865

Closed
@pveierland

Description

@pveierland

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:

image

Props showing that "Meta" item has aria-current set to page and should be selected:

image

Props showing that "Inputs" item has aria-current set to false and should not be selected:

image

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

  1. Create page using https://primer.style/react/drafts/UnderlineNav2#with-nextjs template, with demanding components on each page being navigated between.
  2. Navigate between pages using a separate navigation mechanism (not by clicking UnderlineNav.Item).
  3. Sometimes the UnderlineNav.Item will end up in the state where it is shown visually as being selected, while having aria-current set to undefined or false.

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

Metadata

Metadata

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions