Dropdown: Key down not working if .dropdown-toggle is <input type="text">

[nerdess]

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

This used to work in 5.0.1 but is broken in 5.3.3.

If .dropdown-toggle is an input of type "text", the ability to move through individual .dropdown-item elements using the cursor keys (up/down) is gone.

<div class="dropdown">
  <input type="text" class="dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" />
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

This issue is not specific to any browser or OS.

Reduced test cases

https://codepen.io/nerdess/pen/zxOJNdP

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

macOS, Windows, Android, iOS, Linux

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

Chrome, Safari, Firefox, Microsoft Edge, Opera

What version of Bootstrap are you using?

5.3.3

[nerdess]

OK I checked the source code and found the culprit inside js/src/dropdown.js:

static dataApiKeydownHandler(event) {
    // If not an UP | DOWN | ESCAPE key => not a dropdown command
    // If input/textarea && if key is other than ESCAPE => not a dropdown command

    const isInput = /input|textarea/i.test(event.target.tagName)
    const isEscapeEvent = event.key === ESCAPE_KEY
    const isUpOrDownEvent = [ARROW_UP_KEY, ARROW_DOWN_KEY].includes(event.key)

    if (!isUpOrDownEvent && !isEscapeEvent) {
      return
    }

    if (isInput && !isEscapeEvent) {
      return
    }

}

So if (isInput && !isEscapeEvent) === true, then the keydown-event is not applied. As soon as I comment this if-statement out, the key-down works. I am wondering if this is done deliberately and if so, what is the reasoning behind it?

Maybe the ppl who did the last commits changing the dataApiKeydownHandler method can put some light on this: @GeoSot @Johann-S @alpadev @fat

[templehubsakshi]

Hi!

I see the issue now. It looks like the change to block the arrow keys for input fields was added intentionally to prevent the dropdown from interacting with the input field while typing (unless the Escape key is pressed). This is likely to avoid conflicts if someone is typing in the input, but it seems to break the dropdown navigation for up/down arrows.

If you want the dropdown items to be navigable with the arrow keys again, you can remove or comment out this line in the dropdown.js file:

if (isInput && !isEscapeEvent) {
  return;
}

Removing that line should restore the behavior where you can use the arrow keys to move through the dropdown items.