data-navigo prevents bootstraps navbar dropdowns from closing #315

plaul · 2022-10-07T15:35:02Z

When I'm using bootstrap's navbar with data-navigo links, everything works fine, UNTIL I start using nav-item dropdowns. With Navigo the dropdown doesn't close, without, it closes as expected.

I could not attach HTML files, but the snippet below, added to an index.html file, includes all to illustrate the problem.

The problem lies in the stopPropagation method in Navigo, because if I comment out this line (see below) everything works fine.

if (!destroyed) {
  e.preventDefault();
  //e.stopPropagation();
  self.navigate((0, _utils__WEBPACK_IMPORTED_MODULE_0__.clean)(location), options);
}

But I assume this line is there for a reason (links are removed programmatically)?
So, is there a cleaner fix to this problem?
Kind regards
Lars Plaul :-)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

  <link rel="canonical" ref="https://getbootstrap.com/docs/5.0/components/navbar/">
  <title>Document</title>
  <script src="//unpkg.com/navigo"></script>
  <!-- <script src="navigo.js"></script> -->
</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="/" data-navigo>Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/do-something" data-navigo>Just a link</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown"
              aria-expanded="false">
              Dropdown
            </a>
            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
              <li><a class="dropdown-item" href="/aa" data-navigo>AA</a></li>
              <li><a class="dropdown-item" href="/bb" data-navigo>BB</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <script>
    const router = new Navigo("/", { hash: true });
    //Not especially nice, BUT MEANT to simplify things. Make the router global so it can be accessed from all js-files
    window.router = router

    router.on({
      '/': () => { console.log("Home") },
      '/do-something': () => { console.log("Do something") },
      '/aa': () => { console.log("AA-route") },
      '/bb': () => { console.log("BB-route") },
    })
      .notFound(() => console.log("Not found"))
      .resolve()

  </script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
    </script>
</body>
</html>

The text was updated successfully, but these errors were encountered:

plaul · 2023-01-28T07:49:51Z

This is the same problem, as reported in #296
So same suggestion from me, as in this issue.
Make stopPropagation() optional, or remove it, if there is no need for it

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

data-navigo prevents bootstraps navbar dropdowns from closing #315

data-navigo prevents bootstraps navbar dropdowns from closing #315

plaul commented Oct 7, 2022 •

edited

plaul commented Jan 28, 2023

data-navigo prevents bootstraps navbar dropdowns from closing #315

data-navigo prevents bootstraps navbar dropdowns from closing #315

Comments

plaul commented Oct 7, 2022 • edited

plaul commented Jan 28, 2023

plaul commented Oct 7, 2022 •

edited