[Bug Report] @click:clear in a v-autocomplete cleareable sets the value to undefined always

[empresarrollo]

Versions and Environment

Vuetify: 1.3.9
Vue: 2.5.17
Browsers: Chrome 70.0.3538.102
OS: Windows 8.1

Steps to reproduce

Select an option in the autocomplete, then click the clear button

Expected Behavior

you should see that selectedID is null

Actual Behavior

selectedID is undefined

Reproduction Link

https://codepen.io/anon/pen/mQLdJZ

Other comments

It works OK if you use :clear-icon-cb="()=>selectedID=null" but in console you say is deprecated

[jacekkarczmarczyk]

The difference is that @click:clear is emitted before clearing the value and clear-icon-cb was called after. Event works if you use $nextTick: https://codepen.io/anon/pen/LXmpPJ

See also #4144 and #2752

[gileneusz]

I've got the same issue 😐

[tafel]

+1 it should be great to set it to null, or having the choice, maybe with a new event modifier, like v-model="value" @click:clear.nexttick="value = null"

[gileneusz]

I would rather set it to empty object, maybe just adding proper information to docs as a commentary of clearable prop could be enough for now

edit: this of course depend of what you are returning, if there is return-object prop, it should be like:
@click:clear.nexttick="yourObject = {}"

working with chips also gives null values: https://codepen.io/anon/pen/KrByxg?editors=1011

[romucci]

Any updates on this? Would be really awesome for it to be set to null rather than undefined.

[arcreative]

Would definitely be nice... for now I'm using a computed property with a custom setter since this is a common component for us:

  computed: {
    // Needed since v-autocomplete sets value to undefined instead of null, which results in it being ignored in serialization
    value: {
      get() {
        return this.model[this.property];
      },
      set(val) {
        this.model[this.property] = val || null;
      }
    }
  },

...but would be nice if our team didn't need to be apprised of this whoopsie. Our API/persistence library ignores undefined values (but not null values) when sending updates.

[Webifi]

Just ran into this.

undefined values are not encoded with JSON.stringify, so the intent to clear the value will not be sent to remote APIs.

How about a "clear-value" prop that allows us to set what it is used when cleared? Or just change it to null rather than undefined? Why undefined as the default behavior here?

[johnleider]

@Webifi this is the intended functionality per #4649 and #4431. null is a valid value whereas undefined is the absence of a reference to a value.

[johnleider]

This is intended functionality as described here. The recommended way to handle this at the moment is described above, waiting until the next tick.

If you have any additional questions, please reach out to us in our Discord community.

[arcreative]

@johnleider I'm not sure those issues are related from my perspective. When you clear a value, I think there’s a pretty big difference between setting it to null vs. removing it from existence. I would argue that setting it to null makes more sense in most cases, and a value of undefined is the edge case. In our app, for instance, having an association set to something that was persisted in the server, and then clearing it means that we can’t now PATCH that back to the API because it’s as if the attribute never existed, rather than existed and was set to null. Am I the odd one out? Seems from some of the comments here that I'm not!!

[Webifi]

I completly agree with @arcreative.

"null" is a proper state. Undefined is not. In JavaScript, undefined will essentially remove the referenced property. I'd argue that undefined is not the correct state for the vast majority of use cases.

There's no reason not to allow null values to be selected and also allow "clear" to default to null, but have the edge case where people want a clearable select list for a list containing a null to be forced to use the $nextTick(()=>object.value=undefined) hack to set to undefined.

I will strongly argue that setting a value to null on clear is NOT an edge case.

[KaelWD]

Duplicate of #7429