Rails 5.2 - Sub-menus don't keep opened (Turbolink ?)

Question

I have this sidebar and I am having troubles to open sub-menus.

When I click on a sidebar-dropdown it opens and closes immediately. The more I click the less it opens, and then it doesn't open anymore. Unless I reload...

I tried to disable Turbolink in this menu by adding data-turbolinks="false"in the html. It partially works but this implies other troubles. The sidebar-dropdowns open and close as expected and for some reason I can't explain after some click in the the main navbar they become unclickable unless I reload the page...

A #appears at the end the url when clcik fails.. like so: http://localhost:3000//categories/66# (it happends if turbolink is enabled or disabled"

There are no error at all in the browser console.

In My app I also use gem 'webpacker', '~> 3.5.5'

Any idea of what could be wrong? What direction to take to fix this?

  <div class="page-wrapper chiller-theme toggled"> <!--data-turbolinks="false" is added in the div when turbolink is disabled -->
    <nav id="sidebar" class="sidebar-wrapper">
      <div class="sidebar-content">
        <div class="sidebar-brand">
          <a href="#">Menu pro</a>
          <div id="close-sidebar">
            <i class="fas fa-times"></i>
          </div>
        </div>
        <div class="sidebar-menu">
          <ul>
            <li class="sidebar-dropdown">
              <a href="#">
               <i class="fas fa-cart-arrow-down"></i>
                <span>Orders</span>

              </a>
              <div class="sidebar-submenu">
                <ul>
                  <li>
                    <%= link_to "Orders", orders_path,  class: "list-item" %>
                    <%= link_to "New Orders", incoming_orders_path,  class: "list-item" %>
                  </li>
                </ul>
              </div>
            </li>
            <li>      
            </li>

            <li class="sidebar-dropdown">
              <a href="#">
               <i class="fas fa-truck"></i>
                <span>Market</span>
              </a>
              <div class="sidebar-submenu">
                <ul>
                  <li>
                    <%= link_to "Markets", market_path,  class: "list-item" %>
                  </li>
                </ul>
              </div>
            </li>
            <li>      
            </li>
            <li class="sidebar-dropdown">
              <a href="#" id="suppliers">
                <i class="fas fa-address-book"></i>
                <span>Suppliers</span>
              </a>
              <div class="sidebar-submenu">
                <ul>
                  <li>
                    <%= link_to "New Suppliers", new_supplier_path,  class: "drop-item" %>
                  </li>
                  <li>
                    <%= link_to "Suppliers", suppliers_path,  class: "drop-item" %>
                  </li>
                </ul>
              </div>
            </li>
            <li>
            <li>
               <%= link_to  clients_customization_path, class: "list-item" do %>
               <i class="fa fa-palette"></i> Customisation
               <% end %>
            </li>
          </ul>
        </div>
        <!-- sidebar-menu  -->
      </div>
    </nav>
  </div>

and this is the js file:

// the below turbolink:load is commented when turbolink is disabled
$(document).on('turbolinks:load', function() {
  // The below commented jQuery line is commented when turbolink is disabled and uncommented when trubolink is enabled
  // jQuery(function ($) { 

    $(".sidebar-dropdown > a").click(function() {
      $(".sidebar-submenu").slideUp(200);
      if ($(this).parent().hasClass("active")) {
        $(".sidebar-dropdown").removeClass("active");
        $(this).parent().removeClass("active");

      } else {
        $(".sidebar-dropdown").removeClass("active");
        $(this).next(".sidebar-submenu").slideDown(200);
        $(this).parent().addClass("active");
      }
    });

    $("#close-sidebar").click(function() {
      $(".page-wrapper").removeClass("toggled");
    });
    $("#show-sidebar").click(function() {
      $(".page-wrapper").addClass("toggled");
    });
  // });
});

UPDATE > I figured out that in the case of turbolink is disabled that sidebar-dropdowns become unclickable after I visit a show page (any show pages make sidebar fails)In my show page I use turbolink for bootstrap carrousel.

So the deal is to find HOW I can make turbolink working correctly everywhere

Answer 1

I think you need to prevent the actual behaviour of the link that toggles the drowpdown.

$(".sidebar-dropdown > a").click(function(e) {
  e.preventDefault();
  ....the rest

At least that will prevent the '#' on the url.