Dropdown: refine handling of keydown in input and textarea

[pvdlg]

Fixes #21366

This PR handle better the key inputs in input and textarea within dropdown and dropdown-menu.
As a side note, keyboard navigation is current broken and the fix is here #21535.

This PR will be fully working only when #21535 lands.

Here is the new behaviors.

input and textarea within a dropdown-menu:

• Escape key: dropdown behavior => close the menu
• Arrow down: default behavior (move to the cursor to the end of the text in the input or textarea)
• Arrow up: default behavior => move to the cursor to the beginning of the text in the input or textarea
• Space key: default behavior => enter a space character in the input or textarea
• Other key: default behavior => enter the character in the input or textarea

input and textarea within a dropdown but outside of the dropdown-menu:

• Escape key: dropdown behavior => close the menu
• Arrow down: dropdown behavior => put the focus on the first/next dropdown-item in the menu
• Arrow up: dropdown behavior => put the focus on the first/previous dropdown-item in the menu
• Space key: default behavior => enter a space character in the input or textarea
• Other key: default behavior => enter the character in the input or textarea

[Johann-S]

LGTM 👍

But we have to review this #21535 first

[Johann-S]

Can you update your branch @vanduynslagerp ? Thank you 👍

[Johann-S]

Your unit test failed because of the lack of .dropdown-item and li isn't focusable without tabindex="1"

With this HTML everything is fine :

      <ul class="tabs">
        <li class="dropdown">
          <input type="text" id="input" data-toggle="dropdown">
          <ul class="dropdown-menu" role="menu">
            <li id="item1" tabindex="1" class="dropdown-item"><a href="#">Secondary link</a></li>
            <li id="item2" tabindex="1" class="dropdown-item"><a href="#">Something else here</a></li>
            <li class="divider"/>
            <li tabindex="1" class="dropdown-item"><a href="#">Another link</a></li>
          </ul>
        </li>
      </ul>

[mdo]

@Johann-S I pushed the class name change but tests are still failing. Any chance you could take a look?

[Johann-S]

Superseded by : #24557

[XhmikosR]

escape