fix(components,doc): fix the character counter not reseting when (#2081)

reseting the form

fixes #2054

Co-authored-by: BOUTIGNY Adrien <[email protected]>

Author: hissalht

docs/app/pages/Components/Input/examples/Counters.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <form>
     <md-field>
       <label>Counter</label>
       <md-input v-model="regular" md-counter="30"></md-input>
@@ -24,7 +24,9 @@
       <label>Textarea</label>
       <md-textarea v-model="textarea" md-counter="80"></md-textarea>
     </md-field>
-  </div>
+
+    <md-button class="md-raised" type="reset">RESET</md-button>
+  </form>
 </template>
 
 <script>

src/components/MdField/MdFieldMixin.js

@@ -95,6 +95,23 @@ export default {
         }
       }
     },
+    setFormResetListener () {
+      if (!this.$el.form) {
+        return
+      }
+      const parentForm = this.$el.form
+      parentForm.addEventListener('reset', this.onParentFormReset)
+    },
+    removeFormResetListener () {
+      if (!this.$el.form) {
+        return
+      }
+      const parentForm = this.$el.form
+      parentForm.removeEventListener('reset', this.onParentFormReset)
+    },
+    onParentFormReset () {
+      this.clearField()
+    },
     setFieldValue () {
       this.MdField.value = this.model
     },
@@ -130,5 +147,9 @@ export default {
   },
   mounted () {
     this.setLabelFor()
+    this.setFormResetListener()
+  },
+  beforeDestroy () {
+    this.removeFormResetListener()
   }
 }