Vuetify: [Bug Report] [VSelect]: not working in IE11 when using a placeholder

[DRoet]

Versions and Environment

Vuetify: 1.2.6
Last working version: 1.1.10
Vue: 2.5.17
Browsers: Internet Explorer
OS: Windows 10

Steps to reproduce

1. Use the codepen code and select an item
2. Blur the v-select by clicking outside of it

Expected Behavior

The item gets selected

Actual Behavior

v-select gets cleared empty

Reproduction Link

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

Other comments

https://imgur.com/a/HDxXCtq

caused by: https://github.com/vuetifyjs/vuetify/commit/f37e961f0245ceed5a3ab31a996b2cd292e222fe

[lzhoucs]

I am having the same issue on IE11.

[jeremyZX]

Same issue in IE11

[Meg4mi]

same issue in IE11

[ccarlton96]

How do you test this in IE11? Codepen wont run nativly within IE11.

I'm having a similar issue I think with placeholders not going away when using an when the field is not in focus with data in the field.

[salqueng]

Same issue in IE11

And, here is a quick fix. (tested on 1.3.11 and 1.4.4)

<v-select
  v-model="selectVal"
  :placeholder="selectVal ? undefined : 'just placeholder'"
  />

I don't know why, but removing placeholder prop when value is set works in IE11

[SebastianBienert]

The original problem is that IE tag with placeholder triggers "input" event just by clicking it. It is then handled by onInput function in VTextField.js. There are several posts in stackoverflow complaining about it:
1 2

[MajesticPotatoe]

closed this in 9b354fd

[KaelWD]

Nope. Select doesn't use masks.

[freitasskeeled]

Hi, is there any update on this?
I'm currently experiencing this bug with the latest stable build.
Thanks

[chars1205]

i'm same issue IE11 error vuetify version : 1.5.5
How do I fix bugs?

[perezd]

Confirming this is still a problem 2.1.10

[huynhquangminh]

I fixed it this way and it works fine on IE11

<v-select
       label=" this is plachoder text "
       single-line
></v-select>

[atos1990]

This problem is happen, 'cause VTextField trigger input event. In my case I extend VSelect and create stub for VTextField method onInput:

@Component({
   extends: VSelect
})
class Select extends Vue {
   onInput(e: Event) {
      // this is IE11 fix
      e.preventDefault();
   }
}

[mathew-ferry13]

Still a problem in 2.2.27 --- any update on potential fix?

[vschimpf]

This is an issue for me, and the workaround proposed by @salqueng is not working anymore (used to work).
Any news?

[shiho-hoshino]

In my case
Tested on 2.3.10

<template>
  <v-select
    v-model="innerValue"
    :placeholder="innerPlaceholder"
    multiple
    color="success"
    outlined
    dense
  />
</template>

export default {
  props: {
    value: {
      required: false,
      default: '',
    },
    placeholder: {
      required: false,
      type: [Object, String],
      default: '',
    },
  },
  computed: {
    innerValue: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      },
    },
    innerPlaceholder() {
      return this.innerValue == [] | this.innerValue == '' ? 'test' : undefined;
    },
  },
};