Vuetify: [Bug Report] VSelect Autocomplete - Transition Invalid prop: type check failed for prop "name".

[azampagl]

Versions and Environment

Vuetify: 1.0.10
Vue: 2.5.16
Browsers: Chrome 65.0.3325.181
OS: Windows 10

Steps to reproduce

This is difficult to reproduce since this only occurs in development mode using vue.esm.js. The reproduction link won't display any warnings because it's in production mode, but the code snippet should throw warnings in a dev environment.

When setting the autocomplete field on v-select

<v-select :autocomplete="true" ... />

You'll see a bunch of warnings saying:

vue.esm.js?efeb:591 [Vue warn]: Invalid prop: type check failed for prop "name". Expected String, got Boolean.

found in

---> <Transition>
    <VMenu>
        <VSelect>

I believe the issue is the vuetify is passing a boolean to the name field, which is not valid. I.e. you can see the transition type defined as both in https://github.com/vuetifyjs/vuetify/blob/dev/src/components/VMenu/VMenu.js ~line 77

transition: {
  type: [Boolean, String],
  default: 'menu-transition'
}

Expected Behavior

No warnings in development mode.

Actual Behavior

Lots of warnings when autocomplete is set.

Reproduction Link

https://codepen.io/anon/pen/oqwrWB?editors=1111

[KaelWD]

Duplicate of #3526

You probably aren't actually on vuetify 1.0.10, try console.log(Vuetify.version)

[azampagl]

You are correct... I nuked my node_modules folder and reinstalled and everything is fine now. My apologizes.

[felipe-muner]

I have the same error =(. I updated my yarn to 1.6 and now every v-select give me a error in console =(

found in

--->





at src/components/account/AddBudget.vue

at src/components/account/Budget.vue



at src/components/BudgetAccount.vue

at src/components/DashBoard.vue

at src/App.vue

[tmcdos]

For those of us still sitting on v0.17 the fix is

    genTransition: function genTransition() {
      if (!this.transition) return this.genContent();

      return this.$createElement('transition', {
        props: {
          name: this.transition.toString() // <---- force a String
        }
      }, [this.genContent()]);
    },

[nkoterba]

For those of us still sitting on v0.17 the fix is

    genTransition: function genTransition() {
      if (!this.transition) return this.genContent();

      return this.$createElement('transition', {
        props: {
          name: this.transition.toString() // <---- force a String
        }
      }, [this.genContent()]);
    },

Do you need to edit this in the actual Vue source code? Or just add it to your Vue file?

EDIT: Nevermind. I think I see you need to edit it in the menu-generators.js source code file.

[tmcdos]

You can use https://www.npmjs.com/package/custompatch to avoid direct edits inside node_modules