Skip to content

Dropdown with data-bs-auto-close="outside" shows multiple submenus on arrow key navigation #42366

@MdFirozAlam-maker

Description

@MdFirozAlam-maker

Prerequisites

Describe the issue

What does this fix?

When using data-bs-auto-close="outside" with nested submenus,
pressing the arrow keys caused multiple submenus to remain open
at the same time instead of auto-closing the previous one.

Root Cause

In dataApiKeydownHandler, instance.show() was called
unconditionally on every arrow key press, re-showing already
dismissed dropdowns.

Fix

Wrapped instance.show() with a !instance._isShown() check
so it only opens the dropdown if it is not already visible.

Steps to reproduce

  1. Click Demo top level menu
  2. Click Submenu 3
  3. Press Arrow Up multiple times
  4. Previously: all submenus stayed open ❌
  5. Now: only current submenu shows ✅

Reduced test cases

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

    Windows

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

    Firefox, Chrome

    What version of Bootstrap are you using?

    v5.3.7

    Metadata

    Metadata

    Assignees

    No one assigned

      Labels

      No labels
      No labels

      Type

      No type

      Projects

      No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions