<div class="form-group center-content distance-input">
                                                                        <label class="col-form-label" for="race-distance"><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"
                                v-on:blur="modalTrackEvent" v-on:focus="modalTrackEvent" rows="1" v-on:change=
                                "modalTrackEvent"  v-on:keyup="modalTrackEvent" placeholder="Distance" /></label> <!--CHANGE DISTANCE UNITS -->
                <!--COMMON RACE LENGTHS -->
                <div class="event-modal track-evt-list" v-bind:class=
                "[ismodalvisible ? 'observable' : 'invis']" tabindex="0">
                                <ul>
                                                <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">
                                                                {{ trackevt.id }} {{ trackevt.label }}</li>
                                </ul>
                </div>
                                                        </div>