fix(MdField): improve error states and input reset

vuematerial · Oct 13, 2017 · 1a389b0 · 1a389b0
1 parent 25f5ab1
commit 1a389b0
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 6 deletions.
diff --git a/src/components/MdField/MdField.vue b/src/components/MdField/MdField.vue
@@ -450,6 +450,26 @@
     }
 
     &.md-invalid {
+      @keyframes md-invalid-shake {
+        10%, 90% {
+          transform: translate3d(-1px, 0, 0);
+        }
+
+        30%, 70% {
+          transform: translate3d(-4px, 0, 0);
+        }
+
+        40%, 60% {
+          transform: translate3d(4px, 0, 0);
+        }
+      }
+
+      &.md-has-value label:not(:focus) {
+        animation: md-invalid-shake .4s $md-transition-default-timing both;
+        backface-visibility: hidden;
+        perspective: 1000px;
+      }
+
       &.md-has-textarea:not(.md-autogrow) {
         &:before {
           border-width: 2px;

diff --git a/src/components/MdField/MdFieldMixin.js b/src/components/MdField/MdFieldMixin.js
@@ -31,8 +31,9 @@ export default {
     }
   },
   watch: {
-    value (val) {
-      this.content = val
+    value (value) {
+      this.content = value
+      this.setFieldValue()
     },
     clear (clear) {
       if (clear) {
@@ -57,7 +58,6 @@ export default {
       this.$el.value = ''
       this.content = ''
       this.setFieldValue()
-      this.$emit('input', '')
     },
     setLabelFor () {
       const label = this.$el.parentNode.querySelector('label')
@@ -93,7 +93,10 @@ export default {
       this.MdField.focused = false
     },
     onInput () {
-      this.setFieldValue()
+      const newValue = this.$el ? this.$el.value : this.content
+
+      this.$emit('input', newValue)
+      this.MdField.value = newValue
     }
   },
   created () {

diff --git a/src/components/MdField/MdInput/MdInput.vue b/src/components/MdField/MdInput/MdInput.vue
@@ -6,7 +6,8 @@
     v-model="content"
     @focus="onFocus"
     @blur="onBlur"
-    @input="onInput">
+    @input="onInput"
+    @change="onInput">
 </template>
 
 <script>

diff --git a/src/components/MdField/MdTextarea/MdTextarea.vue b/src/components/MdField/MdTextarea/MdTextarea.vue
@@ -7,7 +7,8 @@
     v-model="content"
     @focus="onFocus"
     @blur="onBlur"
-    @input="onInput">
+    @input="onInput"
+    @change="onInput">
   </textarea>
 </template>