Sub-navigation doesn't show on mouse hover in front-end

Problem/Motivation

Submenus won't show on mouse hover in front end.

Steps to reproduce

Just install the module on D10.1 and try with the default theme.

Proposed resolution

This problem occurs when there are 2 menu elements with same ID on the page (which they are out of the box for me).

I have traced this problem to the following code (from the webpack-built JS file dist/js/frontend.js):

first part: const tbMega = new _plugin_js__WEBPACK_IMPORTED_MODULE_0__["TBMegaMenu"](menu.getAttribute('id'));

second part: this.navParent = document.getElementById(this.id);


The problem is that while the first part initializes the Mega Menu for each of the relevant components (which are queried by their class names), the actual constructor will receive an element ID - which it then uses to get only first of the 2 elements on page. Since one of those elements seems to be a hidden (mobile?) menu and the other one is a visible menu container, only the hidden container is ever converted into the TB Menu. Thus, all of the initialization (mouse events etc.) on the second container is never performed and the menu never shows on mouse over.

My patch in the webpacked JS file was as follows (it will need to get converted into the non-webpacked code somehow but that's outside of my expertise):

// change the following in the Drupal.behaviors.tbMegaMenuInit function
menu.setAttribute('data-initialized', 'true');
const tbMega = new _plugin_js__WEBPACK_IMPORTED_MODULE_0__["TBMegaMenu"]( menu );
tbMega.init();

// change the following TBMegaMenu constructor function
constructor(el) {
  this.id = el.id;
  this.navParent = el;

Remaining tasks

User interface changes

API changes

Data model changes