Angular.js dropdowns break in chrome. Overrides to _eventListeners and addRemoveListener causing conflicts

[mowens3]

In hc-offcanvas-nav.helpers.js,

Node.prototype.addEventListener = addRemoveListener('add');

This line of code seems to have greater implications. Now all elements on the page respond to the addRemoveListener function.

As a result it has to be removed and/or patched to work with angular.js dropdowns and other javascript impacted by this.

Any ideas to improve this or limit the scope of this code? I also had to remove _eventListeners due to their dependency on this function.

With this code removed everything still functions as expected. I'm guessing I removed functionality related to automatically opening the menu at a specific level/item.

[mowens3]

found a way to wrap all this in an isolated container

[somewebmedia]

It was done so the events (if any) in the original menu could be cloned.

found a way to wrap all this in an isolated container

Can you share your solution?

[mowens3]

Sure,

I'm using Drupal 8 and it has the option to add javascript as "behaviors."

These behaviors can also be wrapped in (function ($) { }(jQuery)); to avoid any conflicts.

After adding the main script and helpers as a behavior, I wrapped in this 'noconflict' jquery and it worked without any patches.

It's prob not ideal but avoids running into the previous issue.

(function ($) {
  Drupal.behaviors.hcoffcanvashelpers = {
    attach: function (context, settings) {
         JAVASCRIPT CODE HERE
    }
  };
}(jQuery));