CODEWITHSUNDEEP
vue.jscomboboxvuetify.js
Akshay Suresh
Akshay Suresh

Reputation: 413

Vuetify combobox - How to disable typing in vuetify's combobox

The vuetify combobox is allowing the user to type inside the combobox. Any clue on how to disable this.

This is how I have implemented my combobox.

<v-combobox
:loading="isSurveyBeingPopulated"
class="static--inputs"
color="red"
box
:items="folders"
:rules="[rules.required]"
item-text="value"
dense
placeholder="Select Survey Folder"
item-value="key"
slot="input"
v-model="selectedSurveyFolder">
</v-combobox>

Upvotes: 11

Views: 16070

Answers (5)

schirrel
schirrel

Reputation: 121

I've gone thru the same, i need combobox to list item and custom values but i must disable typing, my solutions was to use key events and "change"its behavior like:

    @keydown="$event.target.blur()"
    @keypress="$event.target.blur()"
    @keyup="$event.target.blur()"

Upvotes: 2

Boris Bellido
Boris Bellido

Reputation: 41

I had the same problem, I used v-select instead of v-combobox, it works fine:

<v-select
  return-object
></v-select>

Upvotes: 1

hgkim
hgkim

Reputation: 95

You can just delete new item after changed.

<v-combobox
    v-model="selected"
    :items="[...selected, ...items]"
    multiple
    @change="onChangeCombobox"
/>

onChangeCombobox(items) {
  this.selected = items.filter((item) => this.items.includes(item))
}

Upvotes: 2

silvan
silvan

Reputation: 1113

Yes, you can achieve filtering of a combobox by using the rules code, e.g.

  <v-combobox
    v-model="selection"
    :items="items"
    :search-input.sync="input"
    :rules="intRule"
    chips
    clearable
    dense
    multiple
    small-chips
    item-text="title"
    autocomplete="off"
    return-object
  >
  </v-combobox>

and then in your script section in data, sth like

data() {
    return {
      selection: [],
      input: null,
      items: [],
      valid: false,
      intRule: [
        function(v) {
          if (!v || v.length < 0) {
            return false
          } else if (v.length > 0) {
            for (let i = 0; i < v.length; i++) {
              if (/[^0-9]/g.test(v[i].id)) {
                v.splice(-1, 1)
                return false
              }
            }
            return false
          } else {
            return true
          }
        }
      ]
    }
  }

the input could be used to overwrite a no results slot and show for what input are no results found.

hope this is helping

Upvotes: -2

dreijntjens
dreijntjens

Reputation: 4825

Combobox:

The v-combobox component is a v-autocomplete that allows the user to enter values that do not exist within the provided items. Created items will be returned as strings.

So if you want to disable the typing you should use a select: https://vuetifyjs.com/en/components/selects

Select fields components are used for collecting user provided information from a list of options.

Upvotes: 19

Related Questions