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.

[killer-it44]

will this bug be fixed any time soon? seems this is happening even in the simplest case, where fixed values are bound, it even happens on the vue-material documentation page

[SanujBansal]

@xiaoye999 looks like we need to fix it on our own

[OladetounJed]

@SanujBansal , how soon can that be fixed?

It's affecting apps on production

[farena]

I decided just to hide the WARN. This is how you can do it:

// main.js
import Vue from 'vue';

Vue.config.errorHandler = (err, vm, info) => {
  if (process.env.NODE_ENV !== 'production') {
    // Show any error but this one
    if (err.message !== "Cannot read property 'badInput' of undefined") {
      console.error(err);
    }
  }
};

new Vue({
  el: '#app',
  render: (h) => h(App),
  router,
});

[buzzingcookie]

Is good that their slogan is "Build well-crafted apps with Material Design and Vue 2.0" but every singe component is buggy AF xD maybe leave it at "Build well-crafted apps with Vue 2.0" that at least works

[SalvoLunar]

Hi, do you any update about this bug? I just finished configuring my whole project with vuematerial :( and I found our about this.

[lyssar]

Is good that their slogan is "Build well-crafted apps with Material Design and Vue 2.0" but every singe component is buggy AF xD maybe leave it at "Build well-crafted apps with Vue 2.0" that at least works

@buzzingcookie

Instead of being a toxic human being you could have just push a pull request with a fix. It seems that you are the godfather of developing - should be easy for you huh?

This ist an open source project so nobody is restricted to just wait that something happen - learn open source or close your mouth and move on ty.

[RobinLeblond]

Hello, is this resolved, the commit about it doesn't include any file, I'm on beta 15 and I still get this error, thanks ? (I did the solution explained by bart-src on Dec 19, 2020 and it work like a charme... but, would be good to have it in the package)

[derekmwright]

The merged fix back in Feb looks good on the surface but I don't believe gets to the root of the problem. While troubleshooting I noticed that certain components that use mdField will have the parent container of the input element in this.$el and NOT the actual input element (mdSelect being an example). I resolved the issue and kept the desired behavior by doing the following instead:

return this.$el.validity ? this.$el.validity.badInput : this.$el.querySelector("input").validity.badInput;

The error was legitimate and I believe the current merged solution will end up masking broken functionality. I haven't yet tested this fix across all Form element types but so far fixes the error w/ mdSelect.

PR: https://github.com/vuematerial/vue-material/pull/2323

[danilovmy]

i can not wait the new patch. Therefore:

import { MdField } from 'vue-material/dist/components'

Vue.use(MdField)

Vue.component('MdSelect', Vue.options.components.MdSelect.extend({
    methods: {
        isInvalidValue: function isInvalidValue () {
            return this.$el.validity ? this.$el.validity.badInput : this.$el.querySelector('input').validity.badInput
        }
    }
}))