Foundation-sites: Dropdown menu could not support mobile

Created on 25 Oct 2016 · 11Comments · Source: foundation/foundation-sites

Hi,

I found the dropdown menu plugin could not support mobile browser.
When touch the submenu item, the click event has not triggered yet and the item will disappear.
And the under DOM element will be touched.

I double checked the official site demo, also has this issue.

Is it a bug?

Dropdown Menu 🐛bug

Source

rockkratos

👍1

Most helpful comment

Yeah, I'm experiencing this too. I think it's happening as a result of #9131. The 'click' event is being fired when you touch any of the submenu items. You can temporarily work around it by adding a data-close-on-click-inside="false" attribute to the dropdown menu.

rbayliss on 25 Oct 2016

👍4 🎉1

All 11 comments

rbayliss on 25 Oct 2016

👍4 🎉1

Thanks for your reply, it works, that's fine. Thank you.

rockkratos on 26 Oct 2016

Thank you @rbayliss for the work around. I just completed upgrading from 5.5.x to 6.2.4 and this bug reared it's ugly head. I just confirmed the workaround works on my iOS 10 device. Looking forward to 6.2.5 soon I hope.

memoht on 29 Oct 2016

6.3 is our next release coming in about a month, but we definitely will get this fixed for that. @sujayjaju as the implementor for #9131 can you take a look at this?

kball on 29 Oct 2016

@rbayliss @memoht @rockkratos a fix for this has just been submitted as a pr: #9338. Can you try this out and see if it works for you?

kball on 8 Nov 2016

Should be fixed by #9338. Would love it if some of the folks struggling with this could try it out...

kball on 11 Nov 2016

I'd be happy to try this but unsure how to pull in this version since I am using Bower and linking to the dist folder. What would I put in my bower.json file under dependencies to use this version instead of "foundation-sites": "6.2.4"

Ok. I just did: foundation-sites": "https://github.com/zurb/foundation-sites.git#v6.3" and trying it now. I'll report back soon.

memoht on 11 Nov 2016

Ok. That didn't work out for me. The foundation.js in the dist folder didn't have this code. I tried to edit to match the code changed in the commit and the links started to work, but the whole dropdown menu part broke.

memoht on 11 Nov 2016

Ah bother, the dist build is only typically rebuilt on release, and if you plug in the change directly it won't work because of the es2016 base version. I'm attaching a zipfile of dist built from the current HEAD of develop, can you try with this?
dist.zip

kball on 11 Nov 2016

@kball Just tested this out on my iOS devices and it appears to be working. Made sure to remove the workaround "data-close-on-click-inside" => "false" first. Thanks for your time and energy. Have a great day. LLAP +1

memoht on 11 Nov 2016

🎉1

@kball Just for my reference, can you please point me to any docs on how to create a build to test? I should be able to contribute in a better way. I am new to the setup. Thanks!