fix(b-form-input, b-form-textarea): properly handle out-of-sync values (closes #4695) (#4701)

jacobmllr95 · tmorehouse · web-flow · commit 954176d733dc · 2020-01-30T23:50:48.000+01:00
* fix(form-input/form-textarea): properly handle out-of-sync values

* Update form-text.js

* Update form-text.js

Co-authored-by: Troy Morehouse &lt;troymore@nbnet.nb.ca&gt;
diff --git a/src/components/form-input/README.md b/src/components/form-input/README.md
@@ -354,7 +354,7 @@ Formatting does not occur if a `formatter` is not provided.
         id="input-formatter"
         v-model="text1"
         placeholder="Enter your name"
-        :formatter="format"
+        :formatter="formatter"
       ></b-form-input>
     </b-form-group>
     <p><b>Value:</b> {{ text1 }}</p>
@@ -370,7 +370,7 @@ Formatting does not occur if a `formatter` is not provided.
         v-model="text2"
         placeholder="Enter your name"
         lazy-formatter
-        :formatter="format"
+        :formatter="formatter"
       ></b-form-input>
     </b-form-group>
     <p class="mb-0"><b>Value:</b> {{ text2 }}</p>
@@ -386,7 +386,7 @@ Formatting does not occur if a `formatter` is not provided.
       }
     },
     methods: {
-      format(value, event) {
+      formatter(value) {
         return value.toLowerCase()
       }
     }
diff --git a/src/components/form-textarea/README.md b/src/components/form-textarea/README.md
@@ -270,7 +270,7 @@ Formatting does not occur if a `formatter` is not provided.
         id="textarea-formatter"
         v-model="text1"
         placeholder="Enter your text"
-        :formatter="format"
+        :formatter="formatter"
       ></b-form-textarea>
     </b-form-group>
     <p style="white-space: pre-line"><b>Value:</b> {{ text1 }}</p>
@@ -286,7 +286,7 @@ Formatting does not occur if a `formatter` is not provided.
         v-model="text2"
         placeholder="Enter your text"
         lazy-formatter
-        :formatter="format"
+        :formatter="formatter"
       ></b-form-textarea>
     </b-form-group>
     <p class="mb-0" style="white-space: pre-line"><b>Value:</b> {{ text2 }}</p>
@@ -302,7 +302,7 @@ Formatting does not occur if a `formatter` is not provided.
       }
     },
     methods: {
-      format(value, event) {
+      formatter(value) {
         return value.toLowerCase()
       }
     }
diff --git a/src/mixins/form-text.js b/src/mixins/form-text.js
@@ -67,10 +67,6 @@ export default {
     }
   },
   computed: {
-    computedDebounce() {
-      // Ensure we have a positive number equal to or greater than 0
-      return Math.max(toInteger(this.debounce) || 0, 0)
-    },
     computedClass() {
       return [
         {
@@ -98,6 +94,13 @@ export default {
       }
       // Most likely a string value (which could be the string 'true')
       return this.ariaInvalid
+    },
+    computedDebounce() {
+      // Ensure we have a positive number equal to or greater than 0
+      return Math.max(toInteger(this.debounce) || 0, 0)
+    },
+    hasFormatter() {
+      return isFunction(this.formatter)
     }
   },
   watch: {
@@ -132,7 +135,7 @@ export default {
     },
     formatValue(value, evt, force = false) {
       value = toString(value)
-      if ((!this.lazyFormatter || force) && isFunction(this.formatter)) {
+      if (this.hasFormatter && (!this.lazyFormatter || force)) {
         value = this.formatter(value, evt)
       }
       return value
@@ -151,7 +154,6 @@ export default {
     },
     updateValue(value, force = false) {
       const lazy = this.lazy
-      const ms = this.computedDebounce
       if (lazy && !force) {
         return
       }
@@ -162,13 +164,28 @@ export default {
           this.vModelValue = value
           this.$emit('update', value)
         }
-        if (ms > 0 && !lazy && !force) {
-          // Change/Blur/Force will not be debounced
-          this.$_inputDebounceTimer = setTimeout(doUpdate, ms)
+        const debounce = this.computedDebounce
+        // Only debounce the value update when a value greater than `0`
+        // is set and we are not in lazy mode or this is a forced update
+        if (debounce > 0 && !lazy && !force) {
+          this.$_inputDebounceTimer = setTimeout(doUpdate, debounce)
         } else {
           // Immediately update the v-model
           doUpdate()
         }
+      } else if (this.hasFormatter) {
+        // When the `vModelValue` hasn't changed but the actual input value
+        // is out of sync, make sure to change it to the given one
+        // Usually caused by browser autocomplete and how it triggers the
+        // change or input event, or depending on the formatter function
+        // https://github.com/bootstrap-vue/bootstrap-vue/issues/2657
+        // https://github.com/bootstrap-vue/bootstrap-vue/issues/3498
+        /* istanbul ignore next: hard to test */
+        const $input = this.$refs.input
+        /* istanbul ignore if: hard to test outof sync value */
+        if ($input && value !== $input.value) {
+          $input.value = value
+        }
       }
     },
     onInput(evt) {
