Menu icon Foundation
Dropdowns not closing

I'm having some trouble figuring out why my dropdowns won't close while on iPad/iPhone/?.
These include topbar dropdowns and normal dropdowns.
Just to be clear, I'm talking about the desktop version of the dropdowns not their mobile versions, so this only applies to devices with enough rez to show the desktop version of the site.

I have an online example - http://danizep.com/fd - just open using any (I believe) mobile device with enough rez to show the desktop version of the topbar and open the "Right Button Dropdown", it shouldn't close anymore after that. This includes clicks on the button, body, etc.

Tests were performed on iPhone 6 (landscape) and iPad Mini (both on Safari), and also on a One Plus.

dropdownnot closing

I'm having some trouble figuring out why my dropdowns won't close while on iPad/iPhone/?.
These include topbar dropdowns and normal dropdowns.
Just to be clear, I'm talking about the desktop version of the dropdowns not their mobile versions, so this only applies to devices with enough rez to show the desktop version of the site.

I have an online example - http://danizep.com/fd - just open using any (I believe) mobile device with enough rez to show the desktop version of the topbar and open the "Right Button Dropdown", it shouldn't close anymore after that. This includes clicks on the button, body, etc.

Tests were performed on iPhone 6 (landscape) and iPad Mini (both on Safari), and also on a One Plus.

Rafi Benkual about 4 years ago

Hmm it's odd. It works as expected on the docs, you tap outside the dropdown and it closes. I didn't see a difference in your markup though.

Alexandre Neves about 4 years ago

Yes, very odd! I can't figure out the reason, it's supposedly the same code, I copied it from the docs to try and figure out if I had made some kind of mistake in my project, but nonetheless it behaves differently.

I'm hoping someone has the answer to this behaviour.

james murphy about 4 years ago

**EDIT
This only happens when inspecting mobile first and has to do with touch events so this is probably the expected behavior and not an issue. I may have jumped the gun.


Some preliminary checking shows that your site is combining the default "hover" topbar menu item with the "clickable" topbar menu item.

On your site, your navigation list item has the classes "has-dropdown not-click", as does the default topbar list item in the docs.

However, if you click on your topbar item, the class "hover" is also added making your list item have the classes "has-dropdown no-click hover."

The class "hover" is only added to the list item for the clickable topbar in the docs.

Your menu item after click:

<li class="has-dropdown not-click hover">

Docs default menu item after click:

<li class="has-dropdown not-click">

Docs clickable menu item after click:

<li class="has-dropdown hover">

I can not reproduce this using your source code and your resources on my local machine. Weird. What can this tell us? A problem with your server? Maybe conflicting resources even though the console shows no errors? I'll keep digging. I hope you find the problem.

Alexandre Neves about 4 years ago

**EDIT you can check this new example playground.pulhas.com

Hi James,

Thanks! I also had a similar issue while inspecting using the xcode simulator, things that weren't working normally would start working after inspecting.

The way I see it this is an event related problem, the body click event doesn't get triggered in mobile which is normal. And this event is responsible for closing the dropdown. It gets triggered tough, when you click on a "a" tag the dropdown does close.

What I don't get, is why it works on their examples...

The event:

S('body').off('.topbar').on('click.fndtn.topbar', function (e) {
  var parent = S(e.target).closest('li').closest('li.hover');
  if (parent.length > 0) {
    return;
  }

  S('[' + self.attr_name() + '] li.hover').removeClass('hover');
});

This event doesn't get triggered while on mobile.

james murphy about 4 years ago

What version of topbar.js are you using? have you tried other versions?

Alexandre Neves about 4 years ago

You can check it here @ http://playground.pulhas.com.
I'm using 5.5.2 and tried the 5.5.0 and 5.4.0, same thing!

james murphy about 4 years ago

Weird.
When I view it on the new link you posted i can get the menu to close when tapping on the top item where as when viewing from the original link i can not.

Alexandre Neves about 4 years ago

I lost too much time with this so I actually developed my own component for flyouts and stopped using every Foundation component related to the topbar.
I'll be using it for all the dropdowns in the near future.

Thanks for you help :)