Раскрывающийся список выбора формы тимелист с индексом

Question

Я создаю раскрывающийся список с использованием тимилиста следующим образом:

<select id="userLevel" class="form-control" required>
    <option th:each="level : ${levels}" th:text="${level.description}" th:value="${level.id}">
</select>

Добавьте HTML-код, созданный тимилефом, следующим образом:

<select id="userLevel" class="form-control" required="">
    <option value="0">Level 1</option>
    <option value="1">Level 2</option>
    <option value="2">Level 3</option>
    <option value="3">Level 4</option>
</select>

<div class="btn-group">
  <button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" title="None selected" aria-expanded="false">
    <span class="multiselect-selected-text">None selected</span> 
    <b class="caret"></b>
  </button>
  <ul class="multiselect-container dropdown-menu" x-placement="bottom-start" style="position: absolute; transform: translate3d(1px, 33px, 0px); top: 0px; left: 0px; will-change: transform;">
    <li><a tabindex="0"><label class="radio" title="Level 1"><input type="radio" value="0"> Level 1</label></a></li>
    <li><a tabindex="0"><label class="radio" title="Level 2"><input type="radio" value="1"> Level 2</label></a></li>
    <li><a tabindex="0"><label class="radio" title="Level 3"><input type="radio" value="2"> Level 3</label></a></li>
    <li><a tabindex="0"><label class="radio" title="Level 4"><input type="radio" value="3"> Level 4</label></a></li>
  </ul>
</div>

Проблема, с которой я столкнулся, заключается в том, чтоклавиша табуляции работает не так, как ожидалось.Я хочу иметь возможность нажимать клавишу табуляции один раз, чтобы циклически проходить по каждому элементу формы, но вместо этого я нажимаю клавишу табуляции один раз, и «выбор» фокусируется, а затем снова и «кнопка» фокусируется.

Я попытался добавить:

tabindex="-1"

к элементу выбора, но затем он добавляет его как к «select», так и к «кнопке», в результате чего:

<select id="userLevel" class="form-control" required="" tabindex="-1">
    ...
</select>

<div class="btn-group">
  <button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" title="None selected" aria-expanded="false" tabindex="-1">
    <span class="multiselect-selected-text">None selected</span> 
    <b class="caret"></b>
  </button>
  ...
</div>

И тогда клавиша табуляции пропускает элемент полностью.Я хочу, чтобы «кнопка» выбиралась один раз при нажатии клавиши табуляции, но не при выборе, поскольку кнопка правильно отформатирована и выделяется, когда она имеет фокус.

Любая помощь будет принята с благодарностью.

Answer 1

Благодаря @Alexandru я обнаружил проблему.

Я также использовал плагин "bootstrap-multiselect.js", который генерировал элемент div, вместе с Thymeleaf, который генерировал элемент select.

Я удалил плагин, и теперь все работает как положено - генерируются только параметры выбора и опции, а кнопка вкладки работает как положено.