Problem/Motivation

We updated from 2.0.0-alpha3 to 2.0.0-alpha7 and noticed that the menu no longer closes when clicked outside the elements on desktop. We are using the menu with arrows. This issue also exists in 3.0.0, which we'll be updating to soon.

In 2.0.0-alpha3, the handleTouch() function was closing the menu on desktop, and this was changed to target the mobile menu in the more recent versions. Our site allows other modals to be closed when clicked outside the elements, so we want to restore this functionality.

Steps to reproduce

Install 2.0.0-alpha7 or 3.0.0 and create a menu with arrows. Open a dropdown on desktop view and try closing it by clicking outside.

Proposed resolution

We can add a JS function that targets the menu with arrows on desktop and closes the menu when clicked outside. I've created a patch that does this.

CommentFileSizeAuthor
#8 Submenu arrow.png182.89 KBravi kant
#6 working-as-accepted.mov3.4 MBravi kant
#2 tb_megamenu-3392516-close-click-outside-desktop.patch1.28 KBadiro

Comments

adiro created an issue. See original summary.

adiro’s picture

adiro commented
StatusFileSize
new tb_megamenu-3392516-close-click-outside-desktop.patch1.28 KB
ravi kant’s picture

ravi kant commented

@adiro
Which version of Drupal is using by you? Because 2.0.0-alpha7 is not compatible with Drupal 10.1.5 which is the latest release till today.

adiro’s picture

adiro commented

Hi @Ravi Kant, we're on Drupal 9.5.11 in production, but we also have this issue using 3.0.0-alpha2 on a staging site running Drupal 10. This patch also applies fine on 3.0.0-alpha2.

ravi kant’s picture

ravi kant commented
Assigned: Unassigned » ravi kant
ravi kant’s picture

ravi kant commented
Assigned: ravi kant » Unassigned
StatusFileSize
new working-as-accepted.mov3.4 MB

@adiro
I just install on fresh local setup but issue is not replicating to me. Attaching video recording for confirmation.

adiro’s picture

adiro commented

Thanks Ravi, did you test the desktop menu? Your video looks like the mobile menu which this issue hasn't affected.

ravi kant’s picture

ravi kant commented
StatusFileSize
new Submenu arrow.png182.89 KB

@adiro
If you will disabled "Submenu arrow" as attached screenshot then issue on desktop will not appear.

ipachece’s picture

ipachece commented

I have reviewed the tb_megamenu-3392516-close-click-outside-desktop.patch in Drupal Version 10.1.7 MySQL 5.7.41-44 and it works correctly

themodularlab’s picture

themodularlab
He/Him
Primary language English
commented

  • themodularlab committed a90a1c89 on 3.x 
    Issue #3392516 by adiro, ravi kant, themodularlab: Arrows menu won't...
themodularlab’s picture

themodularlab
He/Him
Primary language English
commented
Version: 2.0.0-alpha7 » 3.0.0-alpha2
Status: Active » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.