Click menu gets confused when multiple menus on a page

[laryn]

Description of the bug

When there are multiple menus with different settings on the same page, the click menu functionality is not functional.

Steps To Reproduce

To reproduce the behavior:

1. Add multiple menu blocks to a layout - each menu block should have Menu Style = dropdown
2. Make settings different (one should be set to open on click, another not)
3. Test on front end

Actual behavior

Click to open is inconsistent.

Expected behavior

Each menu's settings should control that menu's "click to open" functionality.

Reference

• Original issue adding this functionality: Allow menus to be always click/touch activated (rather than hover) #4200
• PR by @laryn: #4488: Better target menu block "clickdown" settings backdrop#3190
• New PR by @laryn: Issue #4488: Simplify and correct clickdown implementation. backdrop#4401

[laryn]

Javascript is not my strong suit... but this PR seems to work.

[stpaultim]

@laryn - I went to test this issue, but I don't quite understand step #2 in the steps to reproduce.

Either that or I'm misunderstanding something else about this issue. Can you add a little more information or screen shot to the original issue?

---

EDIT: OK, I dug a little deeper and found the configuration necessary to test this issue and was able to reproduce the original issue. I have not yet tested the PR.

[stpaultim]

@laryn - I don't think the PR is working.

I did the following:

1. I made the "about" page a sub-menu of "home" in the primary navigation.
2. I made sure that the Menu Style = Dropdown
3. I left the "Use a click to open" toggle "off"
4. I hovered over "Home" menu item on front page and noticed that the "about" image did not appear as expected.

I did these same things on a Tugboat demo site and it worked as expected. So, I think the PR has actually broken some things that were working.

I have not looked at the code at all yet.

[laryn]

Oh, that's not good. Will have a look and try to clarify the PR and the issue.

[laryn]

@stpaultim I may get back to this but not sure exactly when, so I'm un-self-assigning in case anyone else has better JS chops and wants to tackle it.

[laryn]

I just added a new PR for this which I think simplifies the implementation and actually works with multiple menus. I'm not sure why I initially was jumping back outside the .each loop with $(context).find('[data-clickdown]').data('clickdown') instead of just using $menu.data('clickdown') within the loop.

[stpaultim]

I was able to recreate the problem on a test site. I then tested the PR and find that the PR does fix the problem.

[quicksketch]

Thanks @laryn, @yorkshire-pudding, and @stpaultim! I merged backdrop/backdrop#4401 into 1.x and 1.25.x for 1.25.2.