Responsive menu sub-menu bug

[khawkins98]

(Posting on behalf of Ardan Patwardhan)

The responsive "Also in this section" will sometimes not render sub-menus correctly. The behvaiour only occurs when there is one sub-menu in the sub-menu. If there are two, everything is fine.

The bug was first noticed on http://wwwdev.ebi.ac.uk/pdbe/emdb/emdb_2017

Attempts to destroy and/or re-init the foundation dropdown menu plugin do not seem to help.

In the meantime there is a workaround by adding an invisible child menu item:

<li style="">
  <a href="#">A workaround</a> 
  <ul class="menu"> <li><a href="#">for a bug where the dropdown menu fails sometimes unless there are two submenus in the submenu</a></li></ul>
</li>

Other single-child menus seem to work fine. Unsure if this is a Foundation bug or how we're making the responsive menu, though all appears to be fine.

We could push this workaround into foundationExtendEBI.js

            var responsiveMenuSubMenuBugFix = '<li class="bug-fix-placeholder" style="display:none !important;"><a href="#">A workaround</a> <ul class="menu"> <li><a href="#">for a bug where the dropdown menu fails sometimes unless there are two submenus in the submenu</a></li></ul>  </li>';
            $(localMenuClass).append('<li class="extra-items-menu"><a href="#">Also in this section</a><ul class="menu">'+responsiveMenuSubMenuBugFix+'</ul></li>');

[khawkins98]

Going to leave this one open but move Milestone v1.2. -- Hopefully by then we'll better understand what's causing the need for this workaround, or the source issue will have been resolved.

[ntung]

It seems to me that this does not work on our site.

[khawkins98]

As v1.2 is in RC, kicking this one to v1.3 -- which will bring a good bit of improvements to the JS in general.

[khawkins98]

As this workaround seems to work well, I'm hesitant to fix it for v1.3. May push to v1.4.