Choices-js/Choices

Tabindex does not work

Closed this issue · 2 comments

svivian commented

Describe the bug
The tabindex attribute on elements is ignored.

To Reproduce
Example HTML, with the select element being enhanced by Choices.js:

<input type="text" tabindex="1">
<select tabindex="2">
  <option>Example</option>
</select>
<input type="text" tabindex="3">

Expected behavior
Pressing tab should go from the text input to the dropdown then the second text input. However it skips all elements enhanced by Choices.js. The outer div (class="choices") has tabindex="0" while the inner select element has tabindex="-1" (the latter is expected as the original select shouldn't be focusable).

The tab index should be copied across to the Choices element.

Choices version and bundle

  • Version: 11.0.2

Desktop (please complete the following information):

  • OS: MacOS
  • Browser Chrome, Firefox (latest)
DanielLBrown commented

There is also a keyboard-control issue when tabbing or shift tabbing between adjacent dropdown inputs. One dropdown remains open in spite of focus tabbing to another dropdown. Example from the demo below, Chome MacOS.
choices

  • 👍4
DevDuki commented

There is also a keyboard-control issue when tabbing or shift tabbing between adjacent dropdown inputs. One dropdown remains open in spite of focus tabbing to another dropdown. Example from the demo below, Chome MacOS. choices

This seriously is an issue. Cannot update from v10.2.0 without this issue being fixed

  • 👍1