hoverable dropdown-pane won't close on an iPad

[pratham2003]

What should happen?

Dropdown (dropdown-pane) should close when clicking outside the dropdown-pane with data-hover="true" data-hover-pane="true" data-close-on-click="true"

What happens instead?

On iPad 11.4.1 (Safari/Chrome) the dropdown pane does not close on clicking outside the dropdown-pane.

Test Case and/or Steps to Reproduce

Test Case:
https://codepen.io/KraftPixel/pen/OwOWxO
https://foundation.zurb.com/sites/docs/dropdown.html
Check the Hoverable Dropdown

Context

Trying to build a mega menu that lists more than just a list of links. Works well on desktop. Failed on iPad's landscape mode.

Your Environment

• Foundation version(s) used: Latest
• Browser(s) name and version(s):
  Chrome 68 on iOS 11.4
  Safari 11 on iOS 11.4
• Operating System and version (desktop or mobile): Mobile - iPad - iOS 11.4.1

Checklist (all required):

• I have read and follow the CONTRIBUTING.md document.
• There are no other issues similar to this one.
• The issue title is descriptive.
• The template is correctly filled.

[ncoden]

Hi @pratham2003!

Thank you for the bug report. It comes from the way we listen on clicks on the body. On mobile, no click is detected on non-interactive elements elements.

A quick solution would be to use touchend instead to close the Dropdown on a "tap", but this would close it on a "swip" as well. We had this issue with the Dropdown Menu. See #11091.

I think we can go for the same solution: using the "Touch" utility for Dropdown to listen on the tap event added by #11091. However, this would not come before v6.6.0 as foundation.utils.touch.js may need to be imported for folks using the Dropdown alone (foundation.dropdown.js).

[ncoden]

Hi @pratham2003! I took care of this and created a fix. See #11430. It should be deployed in v6.6.0.