Navlink | Bug | Prevent JS errors in Navlink When Clicking on "Non Scroll-to" Links

[sghoweri]

Jira

http://vjira2:8080/browse/BDS-1728

Summary

Updates the Navlink JS to fix JS errors getting thrown if a link that gets clicked on isn't a link that would get scrolled to.

Note: This error can be viewed on the live boltdesignsystem.com by opening the browser console on the homepage and clicking on the Github link that opens in a new tab.

Details

• Adds missing super calls to the Navlink's older JS
• Add missing config to disable Shadow DOM in the Navlink component (just a precaution given that this component isn't currently rendering / re-rendering any HTML)
• Update the Navlink JS logic to account for links that don't have an href, aren't a hashed link to scroll to an element on the page, or don't have a matching element to scroll to

How to test

• Pull down the changes from this branch, run npm run setup, and start up the local dev environment via npm start
• Confirm that the Nav indicator continues to work on this Pattern Lab page as expected: http://localhost:3000/pattern-lab/patterns/04-pages-40-d8-content-hub-00-sticky-navbar/04-pages-40-d8-content-hub-00-sticky-navbar.html#transformation
• Edit the docs site header at docs-site/src/templates/_page-header.twig and add a few new fake links to do a smoke test on a few different Navlink use cases:

      {
        text: "No Link",
        url: ""
      },
      {
        text: "Non-existent Element",
        url: "#foo"
      },

• Locally, on the main docs site homepage, click on a few different Navlinks in the Navbar to test out the following use cases:

  1. Clicking on a navbar nav link that doesn’t contain an href doesn’t throw a JS error
  2. Clicking on a navbar nav link with a hashed URL but without a matching HTML element with the expected ID doesn’t throw a JS error
  3. Clicking on a navbar nav link with a regular page URL (non-hash URL) doesn’t throw a JS error like it does currently. NOTE: this is easier to replicate when clicking on a URL that opens in a new tab!

• Navigate to the sticky navbar demo page and confirm that when clicking on a navbar nav link that DOES have a matching HTML element with the expected ID, the matching element is smooth scrolled into view as expected.

[remydenton]

Looks good, tested and works as expected.

For my own benefit, is there a back story/reference with more details about calling super() in the connector/disconnector methods?

[sghoweri]

Looks good, tested and works as expected.

For my own benefit, is there a back story/reference with more details about calling super() in the connector/disconnector methods?

@remydenton add that to the list of stuff to chat about during our next Dev huddle!

TLDR: super is super important to call when we're dealing with multiple layers of Classes that open times have have inherited behavior and defaults!

[danielamorse]

@sghoweri Tested locally, works as expected. Approved 👍