Up and down arrow key not working in tabbed way

[mayeenulislam]

How to reproduce

<form>
   <input type="text">
   <select>
      <option value="">Select</option>
      <option value="11">Value 1 of 1</option>
      <option value="12">Value 2 of 1</option>
   </select>
   <select id="enable-select2">
      <option value="">Select</option>
      <option value="21">Value 1 of 2</option>
      <option value="22">Value 2 of 2</option>
   </select>
</form>

Enable select2 on the second select #enable-select2 field.

Now open the form, and use Tab to toggle from one form-element to another. On first tab you are on text field, on second tab you are on the first select field, now hit ↓, you can go to the first option value. Now hit Tab again, you are on the second select field where select2 is enabled, and now hit the ↓ key, nope, it's not working here.

It works only if I press Enter↲, and then hit ↓ or type something.

I think we can fix this.

[Code-Working]

Same for me. Would be nice to have select2 working like "real" select fields.

[kevin-brown]

I was able to reproduce this using this jsbin. This has definitely been reported before, I just can't find the ticket at the moment.

Allowing users to change the value of the select without opening the dropdown would require either

1. The list of possible selections to be pre-loaded, so there isn't that much of a delay.
2. A background request to go out for AJAX/custom data adapters that will leave the user wondering what is happening... until the request finishes and the value changes.
3. Just opening up the dropdown when the down arrow is hit, so at least there is an indication that something is happening.

The first two either don't work, or has serious UX issues, for the most common Select2 use case: remote data sources. And the last one doesn't follow the browser's standard UI, but it has the best UX.

[phazei]

Seems to be a duplicate of #3472

[kevin-brown]

Yup, this is a duplicate of #3472.