Fixing the label for inputs when we received an invalid value (#2108)

Co-authored-by: Beniamin Marcu <[email protected]>
vuematerial · Aug 13, 2020 · 7941614 · 7941614
1 parent 5453944
commit 7941614
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/src/components/MdField/MdField.vue b/src/components/MdField/MdField.vue
@@ -60,7 +60,8 @@
         password: null,
         togglePassword: false,
         clear: false,
-        file: false
+        file: false,
+        hasInvalidValue: false
       }
     }),
     provide () {
@@ -79,7 +80,7 @@
         return this.mdTogglePassword && this.MdField.password
       },
       hasValue () {
-        return this.stringValue && this.stringValue.length > 0
+        return (this.stringValue && this.stringValue.length > 0) || this.MdField.hasInvalidValue 
       },
       valueLength () {
         if (this.stringValue) {

diff --git a/src/components/MdField/MdFieldMixin.js b/src/components/MdField/MdFieldMixin.js
@@ -24,6 +24,7 @@ export default {
         if (value.constructor.toString().match(/function (\w*)/)[1].toLowerCase() !== 'inputevent') {
           this.$nextTick(() => {
             this.localValue = value
+            this.MdField.hasInvalidValue = this.isInvalidValue();
           })
         }
       }
@@ -112,6 +113,9 @@ export default {
     onParentFormReset () {
       this.clearField()
     },
+    isInvalidValue () {
+      return this.$el.validity.badInput
+    },
     setFieldValue () {
       this.MdField.value = this.model
     },