Navigation to page (or refresh of page) with anchornav shows incorrect menu item. Version 1.1.1

[Sara-Jade]

Describe the bug

My team has a microsite with the nav component. When we navigate to it or refresh the page, the nav component shows an incorrect menu item.

• The nav says "Expired codes", but the expired section doesn't appear in this window:

• Navigating from the monolith, "Valid codes" has vertical highlighting that doesn't include the entire phrase vertically "Valid codes"

Verify the version of @aurodesignsystem/auro-nav you have installed

The current version is:

My project has @aurodesignsystem/auro-nav v1.1.1 installed

To Reproduce

Steps to reproduce the behavior:

• We updated our site with some TypeScript fixes, so no repro currently. Not sure if this will pass design.

Are you able to reproduce this issue on the Auro doc site?

• YES
• NO

Expected behavior

Upon page navigation or refresh, no menu item should be highlighted. Alternatively, the first menu item could be highlighted.

Screenshots

See above

Desktop (please complete the following information):

• OS: Windows
• Browser Edge

[blackfalcon]

@Sara-Jade you are saying that when you first open the page or refresh the page, there is a nav options selected. The selection of a nav item is based on an ID in the content. Are you sure that the ID is on the right node in the content?

I think I was able to repro this issue in the docsite. If I update the ID on the content node to be out of sync from the nav ID, I get the same result that the UI defaults to the last option.

The second issue you have, this is hard to debug without actually seeing the code in the inspector. But again, I would make sure that all the IDs are in sync as I feel that is leading to weird behavior.

[MattT2305]

With the dynamic nature of the Gold Guest upgrades not all ids are displayed, so in that case can the anchor navigation default to the first rather than the last option?

[blackfalcon]

With the dynamic nature of the Gold Guest upgrades not all ids are displayed, so in that case can the anchor navigation default to the first rather than the last option?

@jason-capsule42 can you comment on that?

[jason-capsule42]

By definition the anchor nav is a list of links to specific elements (identified by the id attribute) within the content of the document. There must be a one-to-one connection of the the link to a valid ID element in the content. Otherwise the anchor nav is little more than a page outline with no reliable functionality which is not currently a supported use case of this component.

Each anchornav link is essentially an auro-hyperlink restyled. It can not do anything the hyperlink wouldn't. I don't see any way to make the anchornav do what it's intended to do without matching the IDs.

The anchornav element position marker works by positioning itself based on whichever section is in view in the scrollable content section. Since an assumption is made that all anchornav links must match the valid IDed content sections this behavior is going to break when they don't.

If we were to force the marker position to line up at the first element in the anchornav it would never change from there since you would never actually scroll to a new anchornav links matched section since none of them match to begin with.

As I understand from earlier comments in this thread, the content sections of the page are dynamically generated from data. The only solution I can think here would be to link that to some javascript which could also dynamically generate the anchornav links so that you can match the IDs.