data-navigo prevents bootstraps navbar dropdowns from closing #315
Description
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/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
</body>
</html>