Vue-material: MdSelect "TypeError: Cannot read property 'badInput' of undefined"

[cvalues]

This error occurs when an option is selected in the select:

Browser: Firefox & Chrome

https://stackoverflow.com/questions/63994411/vue-js-error-in-nexttick-typeerror-cannot-read-property-badinput-of-undef

[cvalues]

https://github.com/vuematerial/vue-material/issues/2270

seems like the same error

[mullerivan]

same error here...

[stephsalou]

same error ...

[johnkristijan]

Hi,
I have created a pull-request for this one now.
PR #2287

@marqbeniamin could you review it?

[DevVue]

Yep same error, please merge if all good.

[DJDeWitt]

Also getting this error as of today!

[hansvn]

Hi,
I have created a pull-request for this one now.
PR #2287

@marqbeniamin could you review it?

While your PR fixes possible data integrity errors, it has been merged into the dev branch in another PR (#2262).
The change made there does not offer a solution to the root problem though:

When a value is selected in MdSelect it tries to get the DOM elements ($el) validy property.
While this works for MdInput, which has an <input> element as its root DOM element; MdSelects $el is an <md-menu> which doesn't have the validity property.

A solution for this would be to add a reference to the correct <select> element.
I created a PR to fix the original intended behavior and provide a fix for this issue: #2288

[leonardoks16]

Can you update this to npm package?

[jkalousek]

I did overwrite the ...\node_modules\vue-material\ with current github dev branch but i still get

  [10364:1210/183001.221:INFO:CONSOLE(629)] "[Vue warn]: Error in nextTick: "TypeError: Cannot read property 'badInput' of undefined"

  found in

  ---> <MdSelect> at src/components/MdField/MdSelect/MdSelect.vue
         <MdField> at src/components/MdField/MdField.vue
           <MdCardContent> at src/components/MdCard/MdCardContent/MdCardContent.vue
             <MdCard> at src/components/MdCard/MdCard.vue
               <Klient> at src/renderer/components/KlientDetail.vue
                 <Baf> at src/renderer/App.vue
                   <Root>", source: webpack-internal:///./node_modules/vue/dist/vue.esm.js (629)
  [10364:1210/183001.221:INFO:CONSOLE(1896)] "TypeError: Cannot read property 'badInput' of undefined", source: webpack-internal:///./node_modules/vue/dist/vue.esm.js (1896)

when I select option. Is there a way to bypass this? As this is crippling for any development.

EDIT: I also tried npm install https://github.com/vuematerial/vue-material/ and still same error...

[bart-src]

I did overwrite the ...\node_modules\vue-material\ with current github dev branch

Hey, I was losing my mind over this. Have you tried going to node_modules\vue-material\dist\vue-material.js and changing the code there? Search for isInvalidValue and replace the body with
return this.$el.validity ? this.$el.validity.badInput : false;

I'm not sure if this is the right way to fix the bug, but it works.

[jkalousek]

I did overwrite the ...\node_modules\vue-material\ with current github dev branch

Hey, I was losing my mind over this. Have you tried going to node_modules\vue-material\dist\vue-material.js and changing the code there? Search for isInvalidValue and replace the body with
return this.$el.validity ? this.$el.validity.badInput : false;

I'm not sure if this is the right way to fix the bug, but it works.

Yep, I did end up figuring this out as well. But this "fix" cames from #2287 and @hansvn noted few posts above about this PR following: "The change made there does not offer a solution to the root problem" so I see this as woraround but not a fix.