Comments between Nav menu <li> elements break the nav dropdowns

I’m trying to use CoreUI (free) with .NET Blazor, Blazor inserts comments between every element to help with rendering and I believe this is breaking the nav bar on CoreUI, specifically the drop down doesnt work. I have a JSBin example at the bottom of this post.

On nav item click it gets all sibling elements and tries to get the classList of them without checking they are a valid element, hence throws an exception when trying to access classlist.contains on a comment. Just to test I edited the JS in dev tools toggleDropDown() method to exclude comments (added extra condition to if: && t.nodeName != ‘#comment’) and it seemed to fix it, until i refreshed of course. from

` if (Default$9.dropdownAccordion === true) {

    this._getAllSiblings(toggler.parentElement).forEach(function (element) {

      if (element !== toggler.parentNode) {

        if (element.classList.contains(CLASS_NAME_NAV_DROPDOWN)) {

          element.classList.remove(CLASS_NAME_SHOW$6);
        }
      }
    });
  }

` to

`if (Default$9.dropdownAccordion === true) {

    this._getAllSiblings(toggler.parentElement).forEach(function (element) {

      if (element !== toggler.parentNode && element.nodeName != '#comment') {

        if (element.classList.contains(CLASS_NAME_NAV_DROPDOWN)) {

          element.classList.remove(CLASS_NAME_SHOW$6);
        }
      }
    });
  }`

Any assistance with this is much appreciated, happy to raise a pull request if I can get some guidance on this.

Details: Using Windows 10 Tested on Chrome 84.0 and Firefox 79.0

JSBin Example: https://jsbin.com/zizemis/edit?html,output

Old Codepen example(this example works but if you inspect can see that Codepen has removed the commnents): https://codepen.io/JRoachBT/pen/poybwrz Screenshot of debugging

Reproduce Steps: Create new Blazor project in visual studio Add CoreUI Packages Update layout to use CoreUI Click any nav bar dropdown item

Many Thanks,

Josh

[mrholek]

One more try

    _proto._getAllSiblings = function _getAllSiblings(element, filter) {
      var siblings = [];
      element = element.parentNode.firstChild;

      do {
        if (element.nodeType === 3) {
          continue; // text node
        }

        if (element.nodeType === 8) {
          continue; // comment node
        }

        if (!filter || filter(element)) {
          siblings.push(element);
        } // eslint-disable-next-line no-cond-assign

      } while (element = element.nextSibling);

      return siblings;
    };

[aquariens]

This seems to work now thanks a lot! Will this be change be applied to the main branch?

Hi, Is it possible for you to share a minimal blazor project with dropdown working? I tried the workaround but doesn’t seems to be working. I am using CoreUI free with blazor server app.

Thanks,