search

vuematerial / vue-material

Vue.js Framework - ready-to-use Vue components with Material Design, free forever.
https://www.creative-tim.com/vuematerial
MIT License
9.89k stars 1.16k forks source link

MdSelect "TypeError: Cannot read property 'badInput' of undefined" #2285

Open cvalues opened 3 years ago

cvalues commented 3 years ago

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 commented 3 years ago

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

seems like the same error

mullerivan commented 3 years ago

same error here...

stephsalou commented 3 years ago

same error ... Kazam_screenshot_00101

johnkristijan commented 3 years ago

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

@marqbeniamin could you review it?

DevVue commented 3 years ago

Yep same error, please merge if all good.

DJDeWitt commented 3 years ago

Also getting this error as of today!

hansvn commented 3 years ago

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 commented 3 years ago

Can you update this to npm package?

jkalousek commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

OladetounJed commented 3 years ago

@SanujBansal , how soon can that be fixed?

It's affecting apps on production

farena commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

lyssar commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 2 years ago

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
        }
    }
}))