vuetify: [Enhancement] v-combobox does not update until blur

Possible workaround https://codepen.io/thexperiments/pen/ywOdwe

@input.native="category=$event.srcElement.value"

where category is the same model attached to the v-model of the combobox. Would still like it more if it was generic and I could just add this to all the comboboxes without modifying to point to the right model.

@SameeranB Problem resolved!! , I have assigned the value emitted from @ update event directly , instead of doc.getElementbyId.value, Somehow it is working!! thanks!

<template>
    ...
    <v-combobox id="targetInput"
                @update:search-input="updateTargetInput" 
                :rules="rules" 
                :items="autocompletes"
                ></v-combobox>
    ...
</template>

<script>
    ...
    data() {
        return {
            currentTargetInput : null
        }
    },
    methods: {
        updateTargetInput(currentValue){
            this.currentTargetInput = currentValue
        }
    }
    ...
</script>

I think that’s bad UX. It should be possible for the app developer to choose when to validate

I created a workaround myself. Please see this CodePen: https://codepen.io/Paulsky/pen/PowEZOE

I’m using the ‘$refs’ to get the ‘internalSearch’ of a dummy model, and set the ‘actually’ model. The ‘@ change’ is a little misleading; this is only fired when a item from the list is chosen by the user.

Hope this helps someone.

By the way: You could use something like https://lodash.com/docs/latest#debounce to not fire the onChange function directly on each input

Im use updateSelf method (not documented, tested in vuetify 1.5)

From vuetify source (VCombobox.js)

updateSelf () {
  this.multiple ? this.updateTags() : this.updateCombobox()
},

My form submit:

submitForm () {
  // update all cboxses to catch inputed text before work with cbox data
  this.$refs.userCBox.forEach(cbox => cbox.updateSelf());

  // ...
}

Hitting the same issue here. My combobox is last in the form and thus when submitting the form it is very likely that it has not blurred yet and thus the value was not propagated to the property yet.

Additional ideas for a workaround?

you can use the native input event

<v-combobox :items="$store.state.models.map(item => item.fullName)"
                            @input="setFilterString"
                            @input.native="setFilterString"></v-combobox>

setFilterString (e) {
      if (!e) {
        this.filterString = ''
      } else if (typeof e === 'string') {
        this.filterString = e
      } else if (typeof e === 'object') {
        this.filterString = e.srcElement.value
      }
    },

For anyone who still runs into this in v2, the easiest way I solved it was by manually calling blur() on the combobox ref:

<v-combobox ref="combo" v-model="model" />
...
onFormSubmit() {
  (this.$refs.combo as HTMLElement).blur();
  this.$nextTick(() => {
    // model now contains the correct data
  });
}

v2 still has a steady development cycle but has less dedicated developers to focus most of our efforts on v3. As we port over new components to the next version, we are addressing existing issues before actually making the update. In the meantime, I’m labeling this as help wanted.

The team is working hard to ensure that we are able to disposition and resolve issues within a reasonable amount of time post v3. I want to thank everyone for your patience and understanding.

I have another UGLY workaround. I cannot use input.native since I’m using multiple chips with items containing array of objects {text…, value…}.

<v-form ... @submit="form_submit"> ...
...
form_submit: function(event) {
  // XXX: Allow background value update to complete first. (e.g. Combobox).
  //      See https://github.com/vuetifyjs/vuetify/issues/4679
  setTimeout(() => {
    // Actual form submission here.
  }, 100);
},

Simply allow blur event to run before submit. Ugly, but seem working fine. Hopefully this helps.

@input.native=“category=$event.srcElement.value”

This works for disregarding the onblur, but it prevents the combobox from filtering through the object list as I type now. Has anyone solved this added problem?

I couldn’t get it working with the examples above, but the following works for me:

  onBlur (): void {
    (this.$refs.combobox as VCombobox).updateSelf()
  }

with the combobox defined as:

  <v-combobox
    ref="combobox"
    @blur="onBlur"
  />