Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
3 tasks done
nerdess opened this issue Jan 20, 2025 · 1 comment
Open
3 tasks done

Comments

@nerdess
Copy link

nerdess commented Jan 20, 2025

Prerequisites

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
Copy link
Author

nerdess commented Jan 21, 2025

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant