В компоненте Blazor, фокус во входном тексте, как сделать клавишу табуляции, чтобы переместить фокус на выпадающий список?

Question

Я что-то набираю в поле ввода, параметры сужаются. Затем, нажав вкладку, фокус пропускает выпадающий список опций. Я хочу, чтобы он перейти к списку опций. У меня есть образец ниже. Это можно сделать только с помощью атрибутов html? если нет, как я могу сделать это в Blazor?

Я знаю, что клавиши вверх и вниз делают это. Но я чувствую, что это быстрее и интуитивно понятнее для клавиши табуляции.

<input type="text" @bind="@newStudyCode" list="studies" autocomplete="on" placeholder="Search ..." />
<datalist id="studies">
        @if (Studies != null)
        {
            @foreach (var study in Studies)
            {
                <option value="@study.Code">@study.Code - @study.Title</option>
            }
        }
    </datalist>

скомпилированный html выглядит так

<form>
  <input type="text" list="browsers" autocomplete="on" placeholder="Search ...">
  <datalist id="browsers">
            <option value="Firefox" tabindex="1">
                Firefox
            </option>
            <option value="Internet" tabindex="2">
                Internet
            </option>
            <option value="Chrome" tabindex="3">
                Chrome
            </option>
            <option value="Safari" tabindex="4">
                Safari
            </option>
  </datalist>
  <button type="submit">Push me</button>
</form> 

Answer 1

Как только что сказал Кайл, вам просто нужен tabindex

 <input type="text" @bind="@newStudyCode" list="studies" autocomplete="on" placeholder="Search ..." /> 
    <datalist id="studies"> 
       @if (Studies != null) 
          { 
            var i =1;
            @foreach (var study in Studies) 
               { 
                  <option value="@study.Code" tabindex="@i">
                    @study.Code - @study.Title
                  </option
                  i++;
               }
            } 
      </datalist>

Answer 2

Это можно сделать, используя обычный атрибут html tabindex. Ничего особенного для блазора не требуется.

Пример:

<a href="https://www.w3schools.com/" tabindex="2">W3Schools</a>
<a href="http://www.google.com/" tabindex="1">Google</a>
<a href="http://www.microsoft.com/" tabindex="3">Microsoft</a>

См. Здесь: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex