My aim is to have a Bootstrap (5) Navigation bar/menu with animated sub-menus. After much research, I found a solution which seems to give me just what I need. The solution being to use data-bs-toggle="collapse" instead of 'dropdown' given that collapsible elements can be animated. So let's say I have the following markup (only relevant markup shown)...
<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>
I've linked to the Bootstrap css and have loaded the complete Boostrap Javascript bundle. Everything appears to work fine. However, if you open the main menu and the dropdown 'foo' and then tab into any of the 3 options within it and press either Esc, Up/Down arrows or the Space-bar, it crashes with the following:
bootstrap.bundle.js:1041 Uncaught TypeError: Cannot read properties of undefined (reading 'nextElementSibling')
Interestingly the error is different between the downloaded bootstrap JS bundle (5.1.3 as I'm using here), and the one obtained from the CDN (currently 5.0.2).
I've tested this with the old CDN version (4.1.3, JQuery, and with 'data-bs-' changed to 'data-' for compatibility with Bootstrap 4.x) and there are no such errors when pressing any of the keys.
In my project, I'm adding my own handlers for closing the collapsible etc using the keyboard so I'd really like to be able to get rid of this error.
Bootstrap versions tested:
I'm not sure is this is a bug but ultimately, the question is: with Bootstrap 5 how can I achieve this using collapse but without the crashes?
Instead of combining dropdown and collapse, adding a custom animation to the dropdown did it.
ScaleY the dropdown from 0 to 100 depending upon the show class on the button. Here, refer to this: https://jsfiddle.net/69uzmrob/1/