Exploration
In my quest to create a dynamic Bootstrap (5) Navigation bar/menu with animated sub-menus, I stumbled upon a solution that seems to fit the bill perfectly. By employing data-bs-toggle="collapse" instead of 'dropdown', I discovered that collapsible elements could be animated seamlessly. So imagine having the following structure in place...
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav-menu" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Menu control">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="nav-menu">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown-anchor" role="button" data-bs-toggle="collapse" data-bs-target="#dropdown" aria-haspopup="true" aria-expanded="false">
Foo
</a>
<div class="dropdown-menu collapse" aria-labelledby="dropdown-anchor" id="dropdown">
<a class="dropdown-item" href="#">Foo</a>
<a class="dropdown-item" href="#">Bar</a>
<a class="dropdown-item" href="#">Foobar</a>
</div>
</li>
</ul>
</div>
</nav>
Dilemma
Even though I have integrated the necessary Bootstrap css and Javascript files, there seems to be a hiccup. When navigating through the main menu and accessing the dropdown options only to press keys like Esc, Up/Down, or the Space-bar, an error arises:
bootstrap.bundle.js:1041 Uncaught TypeError: Cannot read properties of undefined (reading 'nextElementSibling')
Version Puzzle
Interestingly enough, the error message varies between the locally downloaded bootstrap JS bundle (version 5.1.3 in use here) and the one fetched from the CDN (currently at version 5.0.2).
I conducted tests with the previous CDN release (version 4.1.3, along with JQuery, and tweaked 'data-bs-' to 'data-' for Bootstrap 4.x compatibility) where no such errors were encountered with key interactions.
Given that I am implementing custom handlers for keyboard-based collapsible actions, it is imperative to resolve this recurring error.
Additional Insights
Versions of Bootstrap examined:
- 5.1.3 (Local Download) (Error specified above)
- 5.02 (CDN Source) (Uncaught TypeError: Cannot read properties of undefined (reading 'focus')
- 4.1.3 (From CDN) - No issues detected
While uncertain if this anomaly constitutes a bug, the underlying question persists: how can Bootstrap 5 facilitate seamless collapse functionality minus the unexpected crashes?