[Dropdown] Submenus not working on mobile [with possible solution]

[timothyarmes]

Hi,

Dropdown submenus don't work on mobile devices. They open, but you can't click on the items.

Having spent a couple of hours trying to track this down, I've finally figured out what's happening:

In dropdown.js, when touch events are available they are bound to the mouse enter event:

.on('touchstart' + eventNamespace, selector.item, module.event.item.mouseenter)

Now, whenever there's a touch event, the handler is called. Note that this doesn't happen on a standard browser. Here's the handler:

mouseenter: function(event) {
  var
    $subMenu    = $(this).children(selector.menu),
    $otherMenus = $(this).siblings(selector.item).children(selector.menu)
  ;
  if( $subMenu.length > 0 ) {
    clearTimeout(module.itemTimer);
    module.itemTimer = setTimeout(function() {
      module.verbose('Showing sub-menu', $subMenu);
      $.each($otherMenus, function() {
        module.animate.hide(false, $(this));
      });
      module.animate.show(false,  $subMenu);
    }, settings.delay.show);
    event.preventDefault();
  }
},

When the users taps on an item in the submenu two things now happen:

1. The mouseenter is called for the .item. The code checks for another submenu and exits if there isn't one. So far so good...
2. The mouseenter is then called again, this time for the parent menu item (presumably the event is bubbling up the chain). This time the handler finds a submenu, calls the show submenu code (pointlessly, since it's already open), and then calls event.preventDefault().

Since event.preventDefault() is called, no further events are generated and the click event is hander is never called.

Commenting out the event.preventDefault() appears to solve the issue, but I don't know if there are other repercussion that need to be taken into account.

[jarrettv]

I am also seeing this issue.

[meteorimpact]

Commenting out that line seems to work perfectly. I've not seen any other issues as a result.

[ghost]

I have this issue as well.

[jlukic]

Thanks everyone for your patience here. I apologize for the delays on a fix.

Mobile was triggering mouseenter (show sub-menu) events from touchstart, this was causing an issue where the bubbled event would trigger the parent menus show sub menu and prevent proper selection.

[ghost]

don't mention it 👍 good work takes time