Foundation-sites: Dropdown menu not working on touch devices

[gitwebdevseo]

A few people seem to have raised this issue on the Forum but no feedback from anyone from Zurb.

Here is a codepen to illustrate the problem (on 6.2.4):
http://codepen.io/Byzantium/pen/oYMbmx

On pc/mac the submenu items are clickable and work as you would expect (except giving a 404 within codepen)

On an ipad, if you

1. Tap one of the parent menu headings the submenu opens
2. Tap one of the submenu items the submenu closes with no other action

I have only tested on an ipad as that's all I have, but others have used other touch devices and had the same issue.

I'm still learning foundation, so if the problem is with my code then my apologies. I can't see any reason why it should not work, but it does not.

[kwentworth]

I'm seeing this behavior as well. Comparing 6.2.3 to 6.2.4 I removed the following lines (lines 3909-3911 in foundation.js) and only left the return statement :
if (_this.options.closeOnClickInside) { _this._hide($elem); }

This is how the code was in 6.2.3. The menu doesn't hide on click anymore, but at least the link is followed.

[gitwebdevseo]

It looks to me that this change: https://github.com/zurb/foundation-sites/pull/9472/files
incorporated into the 6.3 release will fix this. I'm not an insider - this is just my personal observation, but it looks like it should do the trick and since 6.3 is out real soon (tomorrow I believe), I'll wait to try that.

[ncoden]

@gitwebdevseo v6.3.0 is released. Is it still an issue ?

[memoht]

I encountered this issue reported and discussed in https://github.com/zurb/foundation-sites/issues/9293 and thought it was later worked out. The interim fix was to add a "data-close-on-click-inside" => "false" to menus. At one point the issue was fixed (https://github.com/zurb/foundation-sites/pull/9338) before 6.3 was released. I just updated to 6.3 and took out this interim fix and the menus aren't working. I just put the fix back in. Really surprised.

[gitwebdevseo]

@ncoden sorry for the delay in replying - been travelling. I have tried it with a fresh local install of 6.3 and it no longer seems to be a problem - i.e. dropdown menu submenu items are selectable on touch devices - well on the ipad I tried with anyway. I would put up a codepen to illustrate but the jsDelivr CDN links (referenced on this page: https://foundation.zurb.com/sites/docs/installation.html) are not yet actually there, so I can't. It would be good to get those CDN links up!

[gitwebdevseo]

Actually - I will raise a separate request to get the CDN links populated.

[sinspiral]

I'm having this issue too with the 6.3.0 version. I have created two codepens using the same example as on the docs.:

• http://codepen.io/sinspiral/pen/ObqbLG
  
  
  
  • This is using v6.3.0 which is broken. On touch devices, the Items 1A-3A don't navigate to its links.
  
  
• http://codepen.io/sinspiral/pen/BQbQjX
  
  
  
  • This is using v6.2.1. This version was the last one it was working.
  
  

As workaround, the only thing I found it works for me is adding to the '.menu' element the attribute data-close-on-click-inside (see http://codepen.io/sinspiral/pen/zoboPp).

Hope it helps!!

[gitwebdevseo]

Yes - contrary to what I said in my previous post, I agree with @sinspiral that it is still broke. Did my own codepen here:
http://codepen.io/Byzantium/pen/jVXrpR
clicking on submemu items on pc/mac gets a 404 (as expected / intended) but tapping on submenu items on a touch device produces no action except that the submenu gets closed.

[scottporco]

thanks @memoht that fixed the issue.
<ul class="menu dropdown menu align-right" data-close-on-click-inside="false" data-dropdown-menu>

[pdaengeli]

I experienced this problem using v.6.3.0 on an iPad and data-close-on-click-inside="false" came to rescue.

[maclein]

been facing the same issue. i'm using foundation sass through the cli so it's the latest version (6.3.0) and the dropdown menu items are not clickable on my mobile phone. the data-close-on-click-inside="false" solution mentioned by @memoht worked as a temporary fix for now.

[sashabeep]

Referencing the same error on android firefox and chrome with 6.3.0
data-close-on-click-inside="false"
changes nothing

[sashabeep]

Added custom handler for parent menu items

$(".topmenu li:has(ul) > a").click(function(e) {
    e.stopPropagation();
        e.preventDefault();

        if($(this).hasClass("oneTouch")){
            $(this).removeClass("oneTouch");
            window.location = $(this).attr("href");
        }
        else{
            $(this).addClass("oneTouch");
        }
    });

[kball]

@sashabeep are you seeing this in 6.3.1? I believe @sinspiral's PR addressed this

[sashabeep]

@kball 6.3.0, 6.3.1 not yet tested without my custom handler.
Facing the problem on touchscreen laptop, now i can't access to this machine

[nathanp]

@kball @sashabeep 6.3.1 has fixed this issue for me.