Foundation 6 top-bar dropdown won't close

Question

I added a dropdown menu to my top-bar, all the submenus appear when I hover the mouse over it.

The problem is after starting the server then when I click any link in my application then the whole submenu aligns vertically in the topbar and won't go away. When I refresh the page with F5 then the submenu items disappear but when I click any other link then they appear again in fixed position, aligned under the dropdown menu link.

Before hover:

On hover:

After clicking whatever link in the app:

To be sure I'm not messing it up myself while describing the front end, I copy-pasted example from Foundation page directly:

.top-bar    
  .top-bar-left
  ul.dropdown.menu data-dropdown-menu=''
    li.menu-text Site Title
    li
      a href="#"  One
      ul.menu.vertical
        li
          a href="#"  One
        li
          a href="#"  Two
        li
          a href="#"  Three
    li
      a href="#"  Two
    li
      a href="#"  Three

I'm using slim for syntax and:

• foundation-rails 6.4.3.0
• rails 5.1.6
• ruby 2.5.1

I checked the javascript console with broswer inspection tools and no errors there (also no errors in server log). I even tested with removing turbolinks in main-layout head but of course it didn't affect. I'm running out of thoughts how to debug further.

My application layout (the top-bar resides in _navbar partial which gets rendered in body):

doctype html
  html lang= I18n.locale.to_s
    head
      meta charset='utf-8'
      meta name='viewport' content='width=device-width, initial-scale=1.0'
      title == content_for?(:title) ? yield(:title) : t('general.home')

      = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
      = include_gon(init: true)
      = javascript_include_tag 'application'
      = javascript_include_tag 'https://www.gstatic.com/charts/loader.js'
      = csrf_meta_tag
      = favicon_link_tag 'favicon.ico'

    body
      .main
        = render 'layouts/navbar'
        = render 'layouts/title', title: @title
        = render 'layouts/messages'
        = yield

And my application javascript (if somehow the order of reloading libaries should matter):

//= require jquery
//= require rails-ujs
//= require turbolinks
//= require rails.validations
//= require rails.validations.simple_form
//= require foundation
//= require chartkick
//= require ckeditor/init
//= require_tree .

$(function(){ $(document).foundation() })

Similar problem described here, but the solution isn't working for me: https://foundation.zurb.com/forum/posts/38667-foundation-62-topbar-dropdown-issue

Answer 1

I'ts a turbolinks issue: inside your application javascript you should load foundation on turbolinks:load like this:

$(document).on('turbolinks:load', function() {
  $(function(){ $(document).foundation() })
})

Have a look at here for more information.