Vuetify: [Bug Report] Combobox value not updated when submit directly from field

[dominik-bln]

Versions and Environment

Vuetify: 1.0.4
Vue: 2.5.13
Browsers: Chrome 64.0.3282.186
OS: Mac OS 10.12.6

Steps to reproduce

• Enter the String "test" into the Combobox
• Click the submit button (no blur before)

Expected Behavior

The output of latestSubmit should contain the string "test"

Actual Behavior

The output in latestSubmit is empty and only contains the value when clicking a second time.

Reproduction Link

https://codepen.io/dmnk_bln/pen/eVQVZq?editors=1111

[Dandi91]

I believe I ran into the same issue, but with a combobox in a dialog: https://codepen.io/anon/pen/EQJYpJ
Open the dialog, type something into combobox, click "Save and Close" (no blur before clicking).
Inside the click handler for "Save and Close" I expect to see the value typed, but what is saved is the value that was in the combobox last time it was blurred.

[johnleider]

This is not something we will be able to fix/support. For entering a custom value, the combobox will only create that new value after blur or enter. When you click submit, this is firing at the same time that the select is being updated, creating a race condition where the value isn't persisted in data before the form is processed.

To get around this, you can simply wait for the nextTick before handling the form processing.

https://codepen.io/johnjleider/pen/VQOVra?editors=1111

[KaelWD]

the combobox will only create that new value after blur or enter

Wouldn't it make more sense to have the same behaviour as a text field? It basically is one but with a menu.

[johnleider]

That is the functionality for v1.1 since v-select will use v-text-field.

[Luca4k4]

@johnleider Hi, i'm issuing this same problem. With the nextTick i can't solve. Your example (https://codepen.io/johnjleider/pen/VQOVra?editors=1111) doesn't seem to work when i click Submit before to blur the combobox if i want to submit the current value and not the previous.
I tryied also with :search-input.sync="currentVar" (that updates the value in real time) but in this way i cannot use v-model and when i'm in edit i get an error because field is required and v-model is null.

I think this is a very very common problem (combobox is always used in a v-form so everyone could experiencing this problem when someone click the submit before blurring fields!)

Any suggestions?
Thank you!

[johnleider]

We kindly ask users to not comment on closed/resolved issues. If you believe that this issue has not been correctly resolved, please create a new issue showing the regression or reach out to us in our Discord community.

Thank you for your contribution and interest in improving Vuetify.

[mattabdi]

I handled this by adding a "ref" to the combo box and adding a ref blur event once the submit() method is triggered.

      <v-select
        class="select-field"
        combobox
        :items="items"
        :value="value"
        @input="handleInput"
        ref="myComboBox">
      </v-select>

        handleInput (newData) {
              this.$refs.myComboBox.blur()
              .... existing code w/ ....
              this.$nextTick(() => {
                  .... do stuff that's dependent on the combobox data
              })
        }

[stanvanlier]

I found another solution

<v-combobox
    v-model="value"
    @input.native="e => value = e.target.value"
></v-combobox>

[cyyssly]

the easiest solution：

submit() {
    setTimeout(() => {
        .... the combobox data has already updated
    })
}

[Revel109]

I found another solution

<v-combobox
    v-model="value"
    @input.native="e => value = e.target.value"
></v-combobox>

This one is the real solution. Thanks.

[locent217]

@input.native="e => value = e.target.value"

The Problem with this is that it messes autocomplete of the combo box and therefore the v-combobox is useless at this point. Maybe using the nextTick() might solve it.

[Luca4k4]

I resolved doing a manually blur() on the ref and then using nextTick(). I think combobox should behave like other components, updating v-model meanwhile

[locent217]

I resolved doing a manually blur() on the ref and then using nextTick(). I think combobox should behave like other components, updating v-model meanwhile

Can you paste your code here?

[Luca4k4]

`this.$refs.combobox.blur();

let self = this; // Probably you'll need it to access data inside below callback
Vue.nextTick().then(function () {
// Submit form...
})`

Hope this help @locent217

[locent217]

`this.$refs.combobox.blur();

let self = this; // Probably you'll need it to access data inside below callback
Vue.nextTick().then(function () {
// Submit form...
})`

Hope this help @locent217

Oh yeah that definitely worked! Forcing it to blur makes the component react to changes. Nice :)

[medicmilos]

Solution that works the best:

<v-combobox
  :items="brands"
  label="Brand"
  v-model="brand"
  ref="brandCombobox"
></v-combobox>

submit() {
  this.$refs.brandCombobox.blur();
  this.$nextTick(() => {
      //api call
  });
}