Dropdown-item error with external link when using Scrollspy.

Hello! I am using Bootstrap 5.0.0-alpha3.

<li><a class="dropdown-item" href="https://duckduckgo.com/">other</a></li>

Using Scrollspy I added in a dropdown a dropdown-item that contains a link to an external page (https://duckduckgo.com/) and I get an error in the console.

The error occurs on the following line: https://github.com/twbs/bootstrap/blob/c63aebc86ba05f0ebb420add653b80804c6a0cff/dist/js/bootstrap.bundle.js#L96-L102

If the selector variable is equal to some external link such as “https://duckduckgo.com/”, the following error occurs:

- 'https://duckduckgo.com/' is not a valid selector

My proposal is to enclose it in a try catch:

  var selector = getSelector(element);

  try {
    return document.querySelector(selector) ? selector : null;
  } catch (_) {
    return null;
  }

Operating system: “windows 10”; Browser and version : {“Firefox”:“83.0”, “Microsoft Edge”:“87.0.664.47”};

A reduced test case here.

[kevinramharak]

Is this going to land in 5.0.0-beta2? The PR seems to have an open review. I would agree with the PR that a class selector should be an invalid href attribute value. That is what data-bs-target is for.

[rohit2sharma95]

Dropping support for the class selector in href would be a breaking change, so it is better to keep it for now. 🙂