Bootstrap4 dropright menu within a dropdown menu closes parent menu

Question

I've got a dropright menu "F" within a dropdown menu that I need to expand when clicked. Right now it does something strange - it closes the parent menu (the dropdown one). Also the dropright menu is expanded by default when it is explicitly said it should not be.

Could not find any information to my problem so I'm asking for your help.

Here's a gif of what happens.

The code to reproduce this is the following:

<ul class="navbar-nav flex-grow-1">
    <li class="nav-item">
        <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
    </li>

    <li class="nav-item">
        <div class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Operations
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                <a class="dropdown-item" asp-area="" asp-controller="" asp-action="" asp-route-companyId="">A</a>
                <a class="dropdown-item" asp-area="" asp-controller="" asp-action="" asp-route-companyId="">B</a>
                <a class="dropdown-item" asp-area="" asp-controller="" asp-action="" asp-route-companyId="">C</a>
                <a class="dropdown-item" asp-area="" asp-controller="" asp-action="" asp-route-companyId="">D</a>
                <a class="dropdown-item" asp-area="" asp-controller="" asp-action="" asp-route-companyId="">E</a>

                <div class="dropright">
                    <a class="dropdown-toggle nav-link" id="navbarDropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        F
                    </a>
                    <div class="dropdown-submenu" aria-labelledby="navbarDropdownMenuLink2">
                        <a class="dropdown-item" asp-area="" asp-controller="" asp-action="" asp-route-companyId="">F1</a>
                        <a class="dropdown-item" asp-area="" asp-controller="" asp-action="" asp-route-companyId="">F2</a>
                    </div>
                </div>
            </div>
        </div>
    </li>
</ul>

Thank you in advance!

Answer 1

You would need some JavaScript for the nested dropdowns; there is no dropdown-submenu class; see if the following code gets you what you want...

$(document).ready(function() {
  $('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
    if (!$(this).next().hasClass('show')) {
      $(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
    }
    var $subMenu = $(this).next(".dropdown-menu");
    $subMenu.toggleClass('show');


    $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
      $('.dropdown-submenu .show').removeClass("show");
    });

    return false;
  });
});

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu a::after {
  transform: rotate(-90deg);
  position: absolute;
  right: 6px;
  top: .8em;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-left: .1rem;
  margin-right: .1rem;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-sm navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
    <a class="navbar-brand" href="#">Home</a>
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Privacy</a>
      </li>

      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Operations
        </a>
        <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <li><a class="dropdown-item" href="#" asp-area="" asp-controller="" asp-action="" asp-route-companyId="">A</a></li>
          <li><a class="dropdown-item" href="#" asp-area="" asp-controller="" asp-action="" asp-route-companyId="">B</a></li>
          <li><a class="dropdown-item" href="#" asp-area=" " asp-controller=" " asp-action=" " asp-route-companyId=" ">C</a></li>
          <li><a class="dropdown-item" href="#" asp-area=" " asp-controller=" " asp-action=" " asp-route-companyId=" ">D</a></li>
          <li><a class="dropdown-item" href="#" asp-area="" asp-controller="" asp-action="" asp-route-companyId="">E</a></li>

          <li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">F</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#" asp-area="" asp-controller="" asp-action="" asp-route-companyId="">F1</a></li>
              <li><a class="dropdown-item" href="#" asp-area="" asp-controller="" asp-action="" asp-route-companyId="">F2</a></li>

            </ul>
          </li>
        </ul>
      </li>
    </ul>

  </div>
</nav>