Search code examples
javascriptvue.jscomboboxvuetify.jstabindex

Move focus to combobox field instead of chip in VuetifyJS


If you go use the keyboards tab-key in this VuetifyJS/VueJS example the chip gets focused first and only after the second tab the combobox textfield. How to focus the combobox textfield first instead of the chip?

<v-flex xs12 sm6 md3>
      <v-text-field label="Regular" autofocus></v-text-field>
    </v-flex>

    <v-flex xs12>
      <v-combobox v-model="select" :items="items" chips label="I use a scoped slot">
        <template slot="selection" slot-scope="data">
          <v-chip
            :selected="data.selected"
            :disabled="data.disabled"
            :key="JSON.stringify(data.item)"
            class="v-chip--select-multi "
            @input="data.parent.selectItem(data.item)"
          >
            <v-avatar class="accent white--text">
              {{ data.item.slice(0, 1).toUpperCase() }}
            </v-avatar>
            {{ data.item }}
          </v-chip>
        </template>
      </v-combobox>
    </v-flex>

Solution

  • Use tabindex property to specify the tab order of the elements.
    Following will make input focus-able before chip.

    <v-combobox tabindex="1">
    <v-chip tabindex="2">
    

    To prevent element to get focus you can set tabindex to -1.
    Note that default value is 0.