Keyboard navigation in dropdowns with auto-close outside behavior leaves multiple dropdowns shown

[tulsaskaterchic]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

In a top level menu with multiple sub-menu dropdowns configured to use the data-bs-auto-close="outside", it is possible to end up with more than one sub-menu being displayed and overlapped on the screen at the same time. The prior menus are not auto-closing as expected.

Steps to recreate (using example menu listed in Reduced test cases)

1. Click on Demo top level menu
2. Click on Submenu 3. See that its items are shown.

4. Use the up arrow key multiple times to navigate focus back up through Submenu 2 and 1. Note that now all sub-menus are being shown and none have closed.

Code that may be causing this behavior is in dropdown.js, dataApiKeydownHandler under

if (isUpOrDownEvent) {
  event.stopPropagation();
  instance.show(); //This is potentially causing a re-show of the item we just left? If I comment out, I no longer see the undesired behavior.
  instance._selectMenuItem(event);
  return;
}

Reduced test cases

Given the following menu setup:

<li class="nav-item dropdown">
     <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false" id="menuDemo">Demo</a>
     <ul class="dropdown-menu">
         <li class="dropend">
             <a class="dropdown-item dropdown-toggle " data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false" href="#" id="subMenuDemo1">Submenu 1</a>
             <ul class="dropdown-menu dropdown-menu-end">
                 <li>Menu Item 1A</li>
                 <li>Menu Item 1B</li>
             </ul>
         </li>         
         <li class="dropend">
             <a class="dropdown-item dropdown-toggle " data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false" href="#" id="subMenuDemo2">Submenu 2</a>
             <ul class="dropdown-menu dropdown-menu-end">
                 <li>Menu Item 2A</li>
                 <li>Menu Item 2B</li>
                 <li>Menu Item 2C</li>
             </ul>
         </li>
         <li class="dropend">
             <a class="dropdown-item dropdown-toggle " data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false" href="#" id="subMenuDemo3">Submenu 3</a>
             <ul class="dropdown-menu dropdown-menu-end">
                 <li>Menu Item 3A</li>
                 <li>Menu Item 3B</li>
             </ul>
         </li>         
     </ul>
 </li>

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Chrome, Microsoft Edge (but suspect it is not browser dependent)

What version of Bootstrap are you using?

v5.3.7