ResponsiveMenus sometimes adds multiple click handlers to the toggle and accordion controls breaking them

Open on Drupal.org →

Created on 23 May 2024, 7 months ago

Problem/Motivation

Sometimes when the page loads, at.responsivemenu.js will apply a click event handler to the responsive menu toggles multiple times. If that number is an even number, clicking the toggle will result in the first handler changing the state of the menu, then the second handler changing it back. I believe it has to do with how Drupal now handles Drupal.behaviors apply functionality with bigpipe causing our themes behaviors to be applied twice in some circumstances.

Steps to reproduce

Enable newly created subtheme.
Enable Responsive Menus extension
Default style: Slide down
Responsive style: Drop menu
Ensure the menu has some items with children.
Logged in, load a page with the menu displayed and ensure the browser is small enough to use the Slide down style.
Click the hamburger menu button

These steps work for me, with the important part being that I'm logged in. Anonymous visiting the site the hamburger menu item only seems to get a single click handler attached, though I've had reports from users that logging out after having logged in does cause the issue to occur sometimes. (caching somehow?!!?!?)

Proposed resolution

Use drupal/once to ensure we only add the click handler once.

Remaining tasks

I am unsure how the minified js files are compiled, so my patch comments out at.responsiveMenus.min.js and uncomments the non-minified version. I'll make a merge request with my changes, but if someone could minify the resulting at.responsiveMenus.js we can undo that change in at_core.libraries.yml.

User interface changes

none

API changes

none

Data model changes

none

🐛 Bug report

Status

Active

Version

7.0

Component

Extensions

Created by

🇺🇸United States redeight

Live updates comments and jobs are added and updated live.

Sign in to follow issues

Merge Requests

!10ResponsiveMenus sometimes adds multiple click handlers to the toggle and accordion controls breaking them
Open
🇺🇸United States redeight
updated 7 months ago

Comments & Activities

Issue created by @redeight
Merge request !10Issue #3449491: ResponsiveMenus sometimes adds multiple click handlers to the toggle and accordion controls breaking them → (Open) created by redeight
Comment 6 months ago →
janc48
I am experiencing a similar problem. The responsive menu doesn't open clicking the Hamburger toggle. I am not sure if it is the same cause though.
This is my site: https://www.pflanzini.de/
Can you check if this is related?
Comment 6 months ago →
🇺🇸United States redeight
janc48, I'm not able to replicate it myself since I can't see a responsive menu on your site. The way I found the issue was to watch the classes on the menu via your browser's inspector when clicking the toggle. If you see a flash of change when the class gets added then immediately removed, it is likely due to this issue. You can also try applying the patch or checking out the merge request branch (whichever is easier for you) and seeing if that fixes it.
Comment 5 months ago →
janc48
I can finally confirm that I am having the same issue. I solved it with unbind() before attaching the handler, but once gives the same result I guess. The true fix would be to find out why the script is called multiple times though.
Comment 3 months ago →
🇺🇸United States redeight
My assumption is that the multiple applies is probably due to BigPipe and how that loads the site elements.

contrib.social Blog FAQ Discussions

Production build 0.71.5 2024