title: How can I restore proper function of the tab key and traverse all form inputs?
body: <p>I'm building an interactive speed calculator and I want desktop browser users to be able to navigate and provide inputs using the keyboard alone if they wish.</p>
  
  <p>Codepen here: <a href="https://codepen.io/mannadu/pen/EBNmzz" rel="nofollow noreferrer">https://codepen.io/mannadu/pen/EBNmzz</a></p>
  
  <p>I tried to accomplish this using the tabindex="0" property on all form inputs, as well as on list items which allow the user to choose from among a few popular running event distances.</p>
  
  <p>Tabbing across the form works fine If I tab through the elements without making a selection, but the tab key stops working as soon as I choose a value from among the popup options for the "Distance" input.</p>
  
  <p>Any suggestions as to what is wrong with the code, and what needs to change to restore expected behavior of the tab-key after entering the first input value?</p>
  
  <p>Relevant portion of the html:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;div class="form-group center-content distance-input"&gt;
    &lt;label class="col-form-label" for="race-distance"&gt;
      &lt;input size="10" type="text" tabindex="0" id="race-distance" v-model:value="input_distance" class="btn btn-outline-light form-control-lg-border border-light" on:blur="modalTrackEvent" v-on:focus="modalTrackEvent" rows="1" v-on:change="modalTrackEvent" v-on:keyup="modalTrackEvent" placeholder="Distance" /&gt;
    &lt;/label&gt;
    &lt;!--CHANGE DISTANCE UNITS --&gt;
    &lt;!--COMMON RACE LENGTHS --&gt;
    &lt;div class="event-modal track-evt-list" v-bind:class="[ismodalvisible ? 'observable' : 'invis']" tabindex="0"&gt;
      &lt;ul&gt;
        &lt;li class="btn btn-outline-light" v-bind:class="[ismodalvisible ? 'observable' : 'invis']" v-on:keyup.enter="setInputDist" v-on:mousedown="setInputDist"  v-for="(trackevt, idx) in trackevent" v-bind:key="idx" v-bind:raceid="idx" tabindex="0"&gt;{{ trackevt.id }} {{ trackevt.label }}&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>