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

[nalbion]

(Possibly unrelated) v-combobox does not seem to emit "input" events, only "update:searchInput".
I tried to use with v-debounce but it did not work.

I have a v-combobox in a v-form, it is a required field with rules. I want to be able to type in the combobox and see that the validation errors disappear and the submit button is enabled without clicking outside of the combobox

https://codepen.io/nalbion/pen/xJgYjL?editors=1111

[vincent41]

i think combobox makes validation on change event, that's why.

[nalbion]

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

[jacekkarczmarczyk]

imho combobox should just emit @input while typing but it extends v-autocomplete so probably won't be a simple fix

[romucci]

Is there a way to update the v-model as soon as you start typing and to be able to search though the selection box?

[KaelWD]

No, that's what this issue's for.

[genez]

Any workaround until this is fixed?

[odai-alali]

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
      }
    },

[thexperiments]

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?

[thexperiments]

https://codepen.io/thexperiments/pen/GeZbxX this demonstrates the issue

[thexperiments]

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.

[ziggybrew]

@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?

[apavel3458]

Problem still unsolved a year later, however the above workaround does work.

[chouhanyang]

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.

[MatthewAry]

I'm very interested in seeing this get fixed. I would like to use the events to track inputs to the field in real time while still being able to use the built-in filtering. Can't do that right now as this component currently is.

[jacekkarczmarczyk]

Workaround (updated to Vuetify 2.x) https://codepen.io/jkarczm/pen/pooOOjV?editors=1111 (same as #5203)

[Paulsky]

@jacekkarczmarczyk are you sure this workaround still works...? There is no update on input change?

[Paulsky]

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

[MrGuiMan]

Would love to see a fix for that as well. For now, requesting an animation frame seemed to do the trick for us, since relying on input.native would trigger validation rules too early.

[SameeranB]

I seem to have found a workaround as well. It's less hacky than the others suggested here. I don't think this one has any side effects like broken filtering or delays either.

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

<script>
    ...
    data() {
        return {
            currentTargetInput : null
        }
    },
    methods: {
        updateTargetInput(){
            this.currentTargetInput = document.getElementById("targetInput").value
        }
    }
    ...
</script>

Turns out that the filtering issue goes away if you don't set a v-model on the component directly.

[nvspradeep]

I seem to have found a workaround as well. It's less hacky than the others suggested here. I don't think this one has any side effects like broken filtering or delays either.

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

<script>
    ...
    data() {
        return {
            currentTargetInput : null
        }
    },
    methods: {
        updateTargetInput(){
            this.currentTargetInput = document.getElementById("targetInput").value
        }
    }
    ...
</script>

Turns out that the filtering issue goes away if you don't set a v-model on the component directly.

When user selects an item from the autocomplete list, currentTargetInput is not getting updated, but rest everything is working
@SameeranB

[SameeranB]

@nvspradeep
Adding the @update:list-index might work. I haven't tried it though...

[PradeepNooney]

@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>

[SameeranB]

@PradeepNooney... Thank YOU! Finally... It works...