search

backdrop / backdrop-issues

Issue tracker for Backdrop core.
144 stars 40 forks source link

Add defensive coding to menus.js / $menuToggleState[0] is undefined #6681

Open laryn opened 3 months ago

laryn commented 3 months ago

Description of the bug

I'm seeing this repeatedly on a site in development. I haven't determined what's causing it yet, but wanted to jot this down and suggest perhaps some defensive coding here. My menus are acting strange, and while it's not identical it reminded me of this thread in Zulip:

That was caused by deprecated jQuery code in a module. That is also possible here but I haven't narrowed it down yet. Here's the error in the console:

Uncaught TypeError: $menuToggleState[0] is undefined attach [site]/core/modules/system/js/menus.js?v=1.28.2:76

Steps To Reproduce

I don't have steps to reproduce yet. When/if I do I will update.

Suggestion

While it's not the problem of this section of menus.js per se, I wonder if we could add a little defensive coding here to check that $menuToggleState[0] is defined before we reference it.

argiepiano commented 3 months ago

Perhaps caused by the a similar problem I found in socialfield? Some deprecated jQuery (not limited to the deprecated load() method) can crash Javascript. Debugging is a bit of a pain. You have to dis-aggregate JS, then step debug the JS in your browser.

What's interesting is the fact that you reported an error in line 76 of menu.js in the warning above. But menu.js only has 67 lines, so, something is wrong with your installation of Backdrop?

laryn commented 3 months ago

Yes, that's my working theory, too.

As far as the script, it's core/modules/system/js/menus.js, not core/modules/menu/js/menu.js.

argiepiano commented 3 months ago

I see. The only suspicious thing I see there is that it uses a listener for the event unload, which is deprecated, but I'm not sure if that may cause the element in the jquery object $menuToggleState to not be available.

Maybe try on different browsers? Also, the $menuToggleState object points at the main menu on the page, which contains the attribute data-menu-toggle-id="menu-toggle-state", so you should check if your page has that element (it's a ul element that contains the main menu). Perhaps some theming or other tweaks to the menu caused that element to not have that attribute, which would cause the error when trying to access the jquery object's DOM element.