From 095ac6ead5b03833259a5f8479fb23cba880a2e3 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Sat, 27 Oct 2018 16:29:39 -0300
Subject: [PATCH 01/66] [WIP] fix(form-textarea): Bug fixes and features

---
 src/components/form-textarea/form-textarea.js | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/form-textarea/form-textarea.js b/src/components/form-textarea/form-textarea.js
index 59f0da59051..2994879b2e2 100644
--- a/src/components/form-textarea/form-textarea.js
+++ b/src/components/form-textarea/form-textarea.js
@@ -2,9 +2,11 @@ import idMixin from '../../mixins/id'
 import formMixin from '../../mixins/form'
 import formSizeMixin from '../../mixins/form-size'
 import formStateMixin from '../../mixins/form-state'
+import formSelectionMixin from '../../mixins/form-selection'
+import formValidityMixin from '../../mixins/form-validity'
 
 export default {
-  mixins: [idMixin, formMixin, formSizeMixin, formStateMixin],
+  mixins: [idMixin, formMixin, formSizeMixin, formStateMixin, formSelectionMixin, formValidityMixin],
   render (h) {
     return h('textarea', {
       ref: 'input',
@@ -146,6 +148,12 @@ export default {
       if (!this.disabled) {
         this.$el.focus()
       }
+    },
+    blur () {
+      // For external handler that may want a blur method
+      if (!this.disabled) {
+        this.$el.blur()
+      }
     }
   }
 }

From 7c69b2cca8dc01bea51e0775424164b250884228 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Sat, 27 Oct 2018 22:49:13 -0300
Subject: [PATCH 02/66] Add better auto rows re-size capabilities

Also imported all native event listeners
---
 src/components/form-textarea/form-textarea.js | 161 +++++++++++++-----
 1 file changed, 121 insertions(+), 40 deletions(-)

diff --git a/src/components/form-textarea/form-textarea.js b/src/components/form-textarea/form-textarea.js
index 2994879b2e2..d7496d4ed2a 100644
--- a/src/components/form-textarea/form-textarea.js
+++ b/src/components/form-textarea/form-textarea.js
@@ -4,48 +4,62 @@ import formSizeMixin from '../../mixins/form-size'
 import formStateMixin from '../../mixins/form-state'
 import formSelectionMixin from '../../mixins/form-selection'
 import formValidityMixin from '../../mixins/form-validity'
+import { getCS, isVisible } from '../../utils/dom'
+
+// Event to use for v-model updates
+const MODEL_EVENT = 'update:value'
 
 export default {
   mixins: [idMixin, formMixin, formSizeMixin, formStateMixin, formSelectionMixin, formValidityMixin],
   render (h) {
+    const self = this
     return h('textarea', {
       ref: 'input',
-      class: this.inputClass,
-      style: this.inputStyle,
+      class: self.computedClass,
+      style: self.computedStyle,
       directives: [
         {
           name: 'model',
           rawName: 'v-model',
-          value: this.localValue,
+          value: self.localValue,
           expression: 'localValue'
         }
       ],
-      domProps: { value: this.value },
       attrs: {
-        id: this.safeId(),
-        name: this.name,
-        disabled: this.disabled,
-        placeholder: this.placeholder,
-        required: this.required,
-        autocomplete: this.autocomplete || null,
-        readonly: this.readonly || this.plaintext,
-        rows: this.rowsCount,
-        wrap: this.wrap || null,
-        'aria-required': this.required ? 'true' : null,
-        'aria-invalid': this.computedAriaInvalid
+        id: self.safeId(),
+        name: self.name,
+        disabled: self.disabled,
+        placeholder: self.placeholder,
+        required: self.required,
+        autocomplete: self.autocomplete || null,
+        readonly: self.readonly || self.plaintext,
+        // We use styles to control teh height
+        rows: self.computedMinRows === self.computedMaxRows ? self.computedMinRows : null,
+        wrap: self.wrap || null,
+        'aria-required': self.required ? 'true' : null,
+        'aria-invalid': self.computedAriaInvalid
       },
+      domProps: { value: self.value },
       on: {
-        input: (evt) => {
-          this.localValue = evt.target.value
-        }
+        ...self.$listeners,
+        input: self.onInput,
+        change: self.onChange
       }
     })
   },
   data () {
     return {
-      localValue: this.value
+      // We use the '==' operator here so that undefined will also equal null
+      // to ensure that value is always a string
+      localValue: this.value == null ? '' : String(this.value),
+      // If we cannot auto resize height
+      dontResize: true,
     }
   },
+  model: {
+    prop: 'value',
+    event: MODEL_EVENT
+  },
   props: {
     value: {
       type: String,
@@ -73,7 +87,7 @@ export default {
     },
     rows: {
       type: [Number, String],
-      default: null
+      default: 2
     },
     maxRows: {
       type: [Number, String],
@@ -85,34 +99,36 @@ export default {
       default: 'soft'
     },
     noResize: {
+      // Use CSS to disable the resize handle of textarea
       type: Boolean,
       default: false
     }
   },
+  mounted () {
+    this.$nextTick(() => { this.dontResize = false })
+  },
+  activated () {
+    this.$nextTick(() => { this.dontResize = false })
+  },
+  dectivated () {
+    // If we are in a deactivated <keep-alive>, dont try resizing
+    this.dontResize = true
+  },
   computed: {
-    rowsCount () {
-      // A better option could be based on https://codepen.io/vsync/pen/frudD
-      // As linebreaks aren't added until the input is submitted
-      const rows = parseInt(this.rows, 10) || 1
-      const maxRows = parseInt(this.maxRows, 10) || 0
-      const lines = (this.localValue || '').toString().split('\n').length
-      return maxRows
-        ? Math.min(maxRows, Math.max(rows, lines))
-        : Math.max(rows, lines)
-    },
-    inputClass () {
+    computedClass () {
       return [
         this.plaintext ? 'form-control-plaintext' : 'form-control',
         this.sizeFormClass,
         this.stateClass
       ]
     },
-    inputStyle () {
-      // We set width 100% in plaintext mode to get around a shortcoming in bootstrap CSS
-      // setting noResize to true will disable the ability for the user to resize the textarea
+    computedStyle () {
       return {
-        width: this.plaintext ? '100%' : null,
-        resize: this.noResize ? 'none' : null
+        // setting noResize to true will disable the ability for the user to
+        // resize the textarea. We also disable when in auto resize mode
+        resize: (this.rowsMin !== this.rowsMax) || this.noResize ? 'none' : null,
+        // THe computed height for auto resize
+        height: this.computedHeight 
       }
     },
     computedAriaInvalid () {
@@ -126,23 +142,88 @@ export default {
       }
       // Most likely a string value (which could be the string 'true')
       return this.ariaInvalid
+    },
+    computedMinRows: function () {
+      // Ensure rows is at least 1 and positive
+      return Math.max(parseInt(this.rows, 10) || 1, 1)
+    },
+    computedMaxRows: function () {
+      return Math.max(this.computedMinRows, parseInt(this.maxRows, 10) || 0)
+    },
+    computedHeight () {
+      const el = this.$el
+      
+      if (this.$isServer || this.computedMinRows === this.computedMaxRows || !el) {
+        return null
+      }
+
+      // We compare this.localValue to null to ensure reactivity with content changes.
+      // Element visibility *must* be checked last.
+      if (this.localValue === null || this.dontResize || !isVisible(el)) {
+        return null
+      }
+
+      // Remember old height and reset it temporarily
+      const oldHeight = el.style.height
+      el.style.height = 'auto'
+      // el.style.height = 'inherit'
+
+      // Get current computed styles
+      const computedStyle = getCS(el)
+      // Height of one line of text in px
+      const lineHeight = parseFloat(computedStyle.lineHeight)
+      // Minimum height for min rows (browser dependant)
+      const minHeight = parseInt(computedStyle.height, 10) || (lineHeight * this.computedMinRows)
+      // Calculate height of content
+      const offset = (parseFloat(computedStyle.borderTopWidth) || 0)
+                   + (parseFloat(computedStyle.borderBottomWidth) || 0)
+                   + (parseFloat(computedStyle.paddingTop) || 0)
+                   + (parseFloat(computedStyle.paddingBottom) || 0)
+      // Calculate content height in "rows"
+      const contentRows = (el.scrollHeight - offset) / lineHeight
+      // Put the old height back (needed when new height is equal to old height!)
+      el.style.height = oldHeight
+      // Calculate number of rows to display
+      const rows = Math.min(Math.max(contentRows, this.computedMinRows)), this.computedMaxRows)
+
+      // return the new computed height in px units
+      return `${Math.max(Math.ceil((rows * lineHeight) + offset), minHeight)}px`
     }
   },
   watch: {
     value (newVal, oldVal) {
       // Update our localValue
       if (newVal !== oldVal) {
-        this.localValue = newVal
+        // We use the '==' operator here so that undefined will also = null
+        // To ensure that value is always a string
+        this.localValue = newVal == null ? '' : String(newVal)
       }
     },
-    localValue (newVal, oldVal) {
-      // update Parent value
+    computedRows (newVal, oldVal) {
       if (newVal !== oldVal) {
-        this.$emit('input', newVal)
+        // if computed rows is truthy, we disable auto resizing
+        this.canResize = newVal ? false : true
       }
     }
   },
   methods: {
+    setValue(val) {
+      if (this.localValue !== val) {
+        // Update the v-model only if value has changed
+        this.localValue = val
+        this.$emit(MODEL_EVENT, this.localValue)
+      }
+    },
+    onInput (evt) {
+      const val = evt.target.value
+      this.setValue(val)
+      this.$emit('input', val, evt)
+    },
+    onChange (evt) {
+      const val = evt.target.value
+      this.setValue(val)
+      this.$emit('change', val, evt)
+    },
     focus () {
       // For external handler that may want a focus method
       if (!this.disabled) {

From 70f4e778efec0bb833d5eb1e917c76a8c0b486e7 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Sat, 27 Oct 2018 22:52:46 -0300
Subject: [PATCH 03/66] lint

---
 src/components/form-textarea/form-textarea.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/form-textarea/form-textarea.js b/src/components/form-textarea/form-textarea.js
index d7496d4ed2a..a41c34024fc 100644
--- a/src/components/form-textarea/form-textarea.js
+++ b/src/components/form-textarea/form-textarea.js
@@ -184,7 +184,7 @@ export default {
       // Put the old height back (needed when new height is equal to old height!)
       el.style.height = oldHeight
       // Calculate number of rows to display
-      const rows = Math.min(Math.max(contentRows, this.computedMinRows)), this.computedMaxRows)
+      const rows = Math.min(Math.max(contentRows, this.computedMinRows), this.computedMaxRows)
 
       // return the new computed height in px units
       return `${Math.max(Math.ceil((rows * lineHeight) + offset), minHeight)}px`

From edcfe2c7723e20772da6b8e481c988d434ac9435 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Sat, 27 Oct 2018 23:04:00 -0300
Subject: [PATCH 04/66] lint

---
 src/components/form-textarea/form-textarea.js | 28 ++++++++++---------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/components/form-textarea/form-textarea.js b/src/components/form-textarea/form-textarea.js
index a41c34024fc..95185e124f2 100644
--- a/src/components/form-textarea/form-textarea.js
+++ b/src/components/form-textarea/form-textarea.js
@@ -33,8 +33,7 @@ export default {
         required: self.required,
         autocomplete: self.autocomplete || null,
         readonly: self.readonly || self.plaintext,
-        // We use styles to control teh height
-        rows: self.computedMinRows === self.computedMaxRows ? self.computedMinRows : null,
+        rows: self.computedRows,
         wrap: self.wrap || null,
         'aria-required': self.required ? 'true' : null,
         'aria-invalid': self.computedAriaInvalid
@@ -53,7 +52,7 @@ export default {
       // to ensure that value is always a string
       localValue: this.value == null ? '' : String(this.value),
       // If we cannot auto resize height
-      dontResize: true,
+      dontResize: true
     }
   },
   model: {
@@ -128,7 +127,7 @@ export default {
         // resize the textarea. We also disable when in auto resize mode
         resize: (this.rowsMin !== this.rowsMax) || this.noResize ? 'none' : null,
         // THe computed height for auto resize
-        height: this.computedHeight 
+        height: this.computedHeight
       }
     },
     computedAriaInvalid () {
@@ -143,16 +142,19 @@ export default {
       // Most likely a string value (which could be the string 'true')
       return this.ariaInvalid
     },
-    computedMinRows: function () {
+    computedMinRows () {
       // Ensure rows is at least 1 and positive
       return Math.max(parseInt(this.rows, 10) || 1, 1)
     },
-    computedMaxRows: function () {
+    computedMaxRows () {
       return Math.max(this.computedMinRows, parseInt(this.maxRows, 10) || 0)
     },
+    computedRows () {
+      return this.computedMinRows === this.computedMaxRows ? this.computedMinRows : null
+    },
     computedHeight () {
       const el = this.$el
-      
+
       if (this.$isServer || this.computedMinRows === this.computedMaxRows || !el) {
         return null
       }
@@ -175,10 +177,10 @@ export default {
       // Minimum height for min rows (browser dependant)
       const minHeight = parseInt(computedStyle.height, 10) || (lineHeight * this.computedMinRows)
       // Calculate height of content
-      const offset = (parseFloat(computedStyle.borderTopWidth) || 0)
-                   + (parseFloat(computedStyle.borderBottomWidth) || 0)
-                   + (parseFloat(computedStyle.paddingTop) || 0)
-                   + (parseFloat(computedStyle.paddingBottom) || 0)
+      const offset = (parseFloat(computedStyle.borderTopWidth) || 0) +
+                     (parseFloat(computedStyle.borderBottomWidth) || 0) +
+                     (parseFloat(computedStyle.paddingTop) || 0) +
+                     (parseFloat(computedStyle.paddingBottom) || 0)
       // Calculate content height in "rows"
       const contentRows = (el.scrollHeight - offset) / lineHeight
       // Put the old height back (needed when new height is equal to old height!)
@@ -202,12 +204,12 @@ export default {
     computedRows (newVal, oldVal) {
       if (newVal !== oldVal) {
         // if computed rows is truthy, we disable auto resizing
-        this.canResize = newVal ? false : true
+        this.dontResize = Boolean(newVal)
       }
     }
   },
   methods: {
-    setValue(val) {
+    setValue (val) {
       if (this.localValue !== val) {
         // Update the v-model only if value has changed
         this.localValue = val

From 3a37afa4a6ceeedc45dae8c060a8b493ac40cfb1 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Sat, 27 Oct 2018 23:30:48 -0300
Subject: [PATCH 05/66] Update form-textarea.js

---
 src/components/form-textarea/form-textarea.js | 32 ++++++++-----------
 1 file changed, 13 insertions(+), 19 deletions(-)

diff --git a/src/components/form-textarea/form-textarea.js b/src/components/form-textarea/form-textarea.js
index 95185e124f2..bca7eb62970 100644
--- a/src/components/form-textarea/form-textarea.js
+++ b/src/components/form-textarea/form-textarea.js
@@ -103,6 +103,16 @@ export default {
       default: false
     }
   },
+  watch: {
+    value (newVal, oldVal) {
+      // Update our localValue
+      if (newVal !== oldVal) {
+        // We use the '==' operator here so that undefined will also = null
+        // To ensure that value is always a string
+        this.localValue = newVal == null ? '' : String(newVal)
+      }
+    }
+  },
   mounted () {
     this.$nextTick(() => { this.dontResize = false })
   },
@@ -125,8 +135,8 @@ export default {
       return {
         // setting noResize to true will disable the ability for the user to
         // resize the textarea. We also disable when in auto resize mode
-        resize: (this.rowsMin !== this.rowsMax) || this.noResize ? 'none' : null,
-        // THe computed height for auto resize
+        resize: (this.computedRows || this.noResize) ? 'none' : null,
+        // The computed height for auto resize
         height: this.computedHeight
       }
     },
@@ -155,7 +165,7 @@ export default {
     computedHeight () {
       const el = this.$el
 
-      if (this.$isServer || this.computedMinRows === this.computedMaxRows || !el) {
+      if (this.$isServer || this.computedRows || !el) {
         return null
       }
 
@@ -192,22 +202,6 @@ export default {
       return `${Math.max(Math.ceil((rows * lineHeight) + offset), minHeight)}px`
     }
   },
-  watch: {
-    value (newVal, oldVal) {
-      // Update our localValue
-      if (newVal !== oldVal) {
-        // We use the '==' operator here so that undefined will also = null
-        // To ensure that value is always a string
-        this.localValue = newVal == null ? '' : String(newVal)
-      }
-    },
-    computedRows (newVal, oldVal) {
-      if (newVal !== oldVal) {
-        // if computed rows is truthy, we disable auto resizing
-        this.dontResize = Boolean(newVal)
-      }
-    }
-  },
   methods: {
     setValue (val) {
       if (this.localValue !== val) {

From 3ed45f768bfe03f315aa95369b90f9abb7270179 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Sat, 27 Oct 2018 23:39:22 -0300
Subject: [PATCH 06/66] Update form-textarea.js

---
 src/components/form-textarea/form-textarea.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/form-textarea/form-textarea.js b/src/components/form-textarea/form-textarea.js
index bca7eb62970..465cd64c8bc 100644
--- a/src/components/form-textarea/form-textarea.js
+++ b/src/components/form-textarea/form-textarea.js
@@ -135,7 +135,7 @@ export default {
       return {
         // setting noResize to true will disable the ability for the user to
         // resize the textarea. We also disable when in auto resize mode
-        resize: (this.computedRows || this.noResize) ? 'none' : null,
+        resize: (!this.computedRows || this.noResize) ? 'none' : null,
         // The computed height for auto resize
         height: this.computedHeight
       }
@@ -165,7 +165,7 @@ export default {
     computedHeight () {
       const el = this.$el
 
-      if (this.$isServer || this.computedRows || !el) {
+      if (this.$isServer || !this.computedRows || !el) {
         return null
       }
 

From 449d3c534dc5c009a23bca6e989db466e9364c22 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Sun, 28 Oct 2018 00:16:20 -0300
Subject: [PATCH 07/66] Update form-textarea.js

---
 src/components/form-textarea/form-textarea.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/form-textarea/form-textarea.js b/src/components/form-textarea/form-textarea.js
index 465cd64c8bc..c0f7c20f2cf 100644
--- a/src/components/form-textarea/form-textarea.js
+++ b/src/components/form-textarea/form-textarea.js
@@ -177,8 +177,8 @@ export default {
 
       // Remember old height and reset it temporarily
       const oldHeight = el.style.height
-      el.style.height = 'auto'
-      // el.style.height = 'inherit'
+      // el.style.height = 'auto'
+      el.style.height = 'inherit'
 
       // Get current computed styles
       const computedStyle = getCS(el)
@@ -211,11 +211,13 @@ export default {
       }
     },
     onInput (evt) {
+      if (evt.target.isComposing) return
       const val = evt.target.value
       this.setValue(val)
       this.$emit('input', val, evt)
     },
     onChange (evt) {
+      if (evt.target.isComposing) return
       const val = evt.target.value
       this.setValue(val)
       this.$emit('change', val, evt)

From 1e7be124f18fe056062ea76d4ce60d2afd4ff38c Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Sun, 28 Oct 2018 00:51:52 -0300
Subject: [PATCH 08/66] Update form-textarea.js

---
 src/components/form-textarea/form-textarea.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/form-textarea/form-textarea.js b/src/components/form-textarea/form-textarea.js
index c0f7c20f2cf..46fdd543471 100644
--- a/src/components/form-textarea/form-textarea.js
+++ b/src/components/form-textarea/form-textarea.js
@@ -165,13 +165,13 @@ export default {
     computedHeight () {
       const el = this.$el
 
-      if (this.$isServer || !this.computedRows || !el) {
+      // We compare this.localValue to null to ensure reactivity with content changes.
+      if (this.localValue === null || this.computedRows || this.dontResize ||  this.$isServer) {
         return null
       }
 
-      // We compare this.localValue to null to ensure reactivity with content changes.
       // Element visibility *must* be checked last.
-      if (this.localValue === null || this.dontResize || !isVisible(el)) {
+      if (!isVisible(el)) {
         return null
       }
 
@@ -211,13 +211,13 @@ export default {
       }
     },
     onInput (evt) {
-      if (evt.target.isComposing) return
+      if (evt.target.composing) return
       const val = evt.target.value
       this.setValue(val)
       this.$emit('input', val, evt)
     },
     onChange (evt) {
-      if (evt.target.isComposing) return
+      if (evt.target.composing) return
       const val = evt.target.value
       this.setValue(val)
       this.$emit('change', val, evt)

From 8284093be20719f336e1767945b7a534867d09a0 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Sun, 28 Oct 2018 01:03:20 -0300
Subject: [PATCH 09/66] Update form-textarea.js

---
 src/components/form-textarea/form-textarea.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/form-textarea/form-textarea.js b/src/components/form-textarea/form-textarea.js
index 46fdd543471..b63066c9150 100644
--- a/src/components/form-textarea/form-textarea.js
+++ b/src/components/form-textarea/form-textarea.js
@@ -166,11 +166,11 @@ export default {
       const el = this.$el
 
       // We compare this.localValue to null to ensure reactivity with content changes.
-      if (this.localValue === null || this.computedRows || this.dontResize ||  this.$isServer) {
+      if (this.localValue === null || this.computedRows || this.dontResize || this.$isServer) {
         return null
       }
 
-      // Element visibility *must* be checked last.
+      // Element must be visible (not hidden) and in document. *Must* be checked after above.
       if (!isVisible(el)) {
         return null
       }

From 4f4d25ad7a6964828f594c6bc53555a24f726208 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Sun, 28 Oct 2018 02:41:22 -0300
Subject: [PATCH 10/66] Update form-textarea.js

---
 src/components/form-textarea/form-textarea.js | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/components/form-textarea/form-textarea.js b/src/components/form-textarea/form-textarea.js
index b63066c9150..45ac5827335 100644
--- a/src/components/form-textarea/form-textarea.js
+++ b/src/components/form-textarea/form-textarea.js
@@ -6,12 +6,10 @@ import formSelectionMixin from '../../mixins/form-selection'
 import formValidityMixin from '../../mixins/form-validity'
 import { getCS, isVisible } from '../../utils/dom'
 
-// Event to use for v-model updates
-const MODEL_EVENT = 'update:value'
-
 export default {
   mixins: [idMixin, formMixin, formSizeMixin, formStateMixin, formSelectionMixin, formValidityMixin],
   render (h) {
+    // using self instead of this helps reduce code size during minification
     const self = this
     return h('textarea', {
       ref: 'input',
@@ -38,7 +36,9 @@ export default {
         'aria-required': self.required ? 'true' : null,
         'aria-invalid': self.computedAriaInvalid
       },
-      domProps: { value: self.value },
+      domProps: {
+        value: self.value
+      },
       on: {
         ...self.$listeners,
         input: self.onInput,
@@ -57,7 +57,7 @@ export default {
   },
   model: {
     prop: 'value',
-    event: MODEL_EVENT
+    event: 'update'
   },
   props: {
     value: {
@@ -153,8 +153,8 @@ export default {
       return this.ariaInvalid
     },
     computedMinRows () {
-      // Ensure rows is at least 1 and positive
-      return Math.max(parseInt(this.rows, 10) || 1, 1)
+      // Ensure rows is at least 2 and positive (2 is the native textarea value)
+      return Math.max(parseInt(this.rows, 10) || 2, 2)
     },
     computedMaxRows () {
       return Math.max(this.computedMinRows, parseInt(this.maxRows, 10) || 0)
@@ -203,24 +203,24 @@ export default {
     }
   },
   methods: {
-    setValue (val) {
+    updateValue (val) {
       if (this.localValue !== val) {
         // Update the v-model only if value has changed
         this.localValue = val
-        this.$emit(MODEL_EVENT, this.localValue)
+        this.$emit('update', this.localValue)
       }
     },
     onInput (evt) {
+      this.$emit('input', evt)
       if (evt.target.composing) return
-      const val = evt.target.value
-      this.setValue(val)
-      this.$emit('input', val, evt)
+      if (evt.defaultPrevented) return
+      this.updateValue(evt.target.value)
     },
     onChange (evt) {
+      this.$emit('change', evt)
       if (evt.target.composing) return
-      const val = evt.target.value
-      this.setValue(val)
-      this.$emit('change', val, evt)
+      if (evt.defaultPrevented) return
+      this.updateValue(evt.target.value)
     },
     focus () {
       // For external handler that may want a focus method

From 24193f0296fe57585345a36ce56eecd331e11ee4 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Sun, 28 Oct 2018 03:02:24 -0300
Subject: [PATCH 11/66] Update package.json

Document events
---
 src/components/form-textarea/package.json | 58 ++++++++++++++++-------
 1 file changed, 41 insertions(+), 17 deletions(-)

diff --git a/src/components/form-textarea/package.json b/src/components/form-textarea/package.json
index 13e92eccd40..a59d8b196a3 100644
--- a/src/components/form-textarea/package.json
+++ b/src/components/form-textarea/package.json
@@ -1,20 +1,44 @@
 {
-    "name": "@bootstrap-vue/form-textarea",
-    "version": "1.0.0",
-    "meta": {
-        "title": "Form Textarea",
-        "component": "bFormTextarea",
-        "events": [
-            {
-                "event": "input",
-                "description": "Emitted when the textarea receives input from user.",
-                "args": [
-                    {
-                        "arg": "value",
-                        "description": "current value of the textarea"
-                    }
-                ]
-            }
+  "name": "@bootstrap-vue/form-textarea",
+  "version": "1.0.0",
+  "meta": {
+    "title": "Form Textarea",
+    "component": "bFormTextarea",
+    "events": [
+      {
+        "event": "input",
+        "description": "Native input event triggered by user interaction. Emitted before any formatting and before the v-model is updated. Cancelable.",
+        "args": [
+          {
+            "arg": "event",
+            "description": "Native input event object"
+          }
         ]
-    }
+      },
+      {
+        "event": "change",
+        "description": "Change event triggerd by user interaction. Emitted after any formatting and after the v-model is updated.",
+        "args": [
+          {
+            "arg": "value",
+            "description": "the value of the input"
+          },
+          {
+            "arg": "event",
+            "description": "Native change event object (from before any formatting)"
+          }
+        ]
+      },
+      {
+        "event": "update",
+        "description": "Emitted to update the v-model",
+        "args": [
+          {
+            "arg": "value",
+            "description": "Value of input, after any formatting"
+          }
+        ]
+      }
+    ]
+  }
 }

From e838d339d420d23a03ccdd5b21c97e3aab308697 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Sun, 28 Oct 2018 04:17:56 -0300
Subject: [PATCH 12/66] Ajust event $emit ordering

---
 src/components/form-textarea/form-textarea.js | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/form-textarea/form-textarea.js b/src/components/form-textarea/form-textarea.js
index 45ac5827335..5b6edadbc44 100644
--- a/src/components/form-textarea/form-textarea.js
+++ b/src/components/form-textarea/form-textarea.js
@@ -109,18 +109,20 @@ export default {
       if (newVal !== oldVal) {
         // We use the '==' operator here so that undefined will also = null
         // To ensure that value is always a string
-        this.localValue = newVal == null ? '' : String(newVal)
+        this.updateValue(newVal == null ? '' : String(newVal))
       }
     }
   },
   mounted () {
+    // Enable opt-in resizing once mounted
     this.$nextTick(() => { this.dontResize = false })
   },
   activated () {
+    // If we are being re-activated in <keep-alive>, enable opt-in resizing
     this.$nextTick(() => { this.dontResize = false })
   },
   dectivated () {
-    // If we are in a deactivated <keep-alive>, dont try resizing
+    // If we are in a deactivated <keep-alive>, disable opt-in resizing
     this.dontResize = true
   },
   computed: {
@@ -177,8 +179,7 @@ export default {
 
       // Remember old height and reset it temporarily
       const oldHeight = el.style.height
-      // el.style.height = 'auto'
-      el.style.height = 'inherit'
+      el.style.height = 'auto'
 
       // Get current computed styles
       const computedStyle = getCS(el)
@@ -195,11 +196,13 @@ export default {
       const contentRows = (el.scrollHeight - offset) / lineHeight
       // Put the old height back (needed when new height is equal to old height!)
       el.style.height = oldHeight
-      // Calculate number of rows to display
+      // Calculate number of rows to display (limited within min/max rows)
       const rows = Math.min(Math.max(contentRows, this.computedMinRows), this.computedMaxRows)
+      // Calulate the required height of the textarea including border and padding (in pixels)
+      const height = Math.max(Math.ceil((rows * lineHeight) + offset), minHeight)
 
       // return the new computed height in px units
-      return `${Math.max(Math.ceil((rows * lineHeight) + offset), minHeight)}px`
+      return `${height}px`
     }
   },
   methods: {
@@ -212,15 +215,12 @@ export default {
     },
     onInput (evt) {
       this.$emit('input', evt)
-      if (evt.target.composing) return
       if (evt.defaultPrevented) return
       this.updateValue(evt.target.value)
     },
     onChange (evt) {
-      this.$emit('change', evt)
-      if (evt.target.composing) return
-      if (evt.defaultPrevented) return
       this.updateValue(evt.target.value)
+      this.$emit('change', this.localValue, evt)
     },
     focus () {
       // For external handler that may want a focus method

From 8c1ee386bf068fbfe125b9e8f9d1a648d76b7ed2 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Sun, 28 Oct 2018 04:45:15 -0300
Subject: [PATCH 13/66] Create form-formatting mixin

For use with b-form-textarea and b-form-input
---
 src/mixins/form-formatting.js | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)
 create mode 100644 src/mixins/form-formatting.js

diff --git a/src/mixins/form-formatting.js b/src/mixins/form-formatting.js
new file mode 100644
index 00000000000..ddd29928000
--- /dev/null
+++ b/src/mixins/form-formatting.js
@@ -0,0 +1,18 @@
+export default {
+  props: {
+    formatter: {
+      type: Function,
+      value: null
+    },
+    lazyFormatter: {
+      type: Boolean,
+      value: false
+    }
+  },
+  methods: {
+    getFormatted (value, event = null) {
+      value = value == null ? '' : String(value)
+      return this.formatter ? this.formatter(value, event) : value
+    }
+  }
+}

From ab9990ad580d5f61acfc63ad1007ed1e3d415274 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Sun, 28 Oct 2018 05:00:48 -0300
Subject: [PATCH 14/66] Add stringify method for mixin

---
 src/mixins/form-formatting.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/mixins/form-formatting.js b/src/mixins/form-formatting.js
index ddd29928000..4a38d4d223d 100644
--- a/src/mixins/form-formatting.js
+++ b/src/mixins/form-formatting.js
@@ -11,8 +11,11 @@ export default {
   },
   methods: {
     getFormatted (value, event = null) {
-      value = value == null ? '' : String(value)
+      value = this.stringifyValue(value)
       return this.formatter ? this.formatter(value, event) : value
+    },
+    stringifyValue (value) {
+      return value == null ? '' : String(value)
     }
   }
 }

From 2cbbade0834a7b9b7729ec3ba1371fd81ff1d0e4 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Sun, 28 Oct 2018 06:33:34 -0300
Subject: [PATCH 15/66] Update package.json

---
 src/components/form-textarea/package.json | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/form-textarea/package.json b/src/components/form-textarea/package.json
index a59d8b196a3..15bf0d1311b 100644
--- a/src/components/form-textarea/package.json
+++ b/src/components/form-textarea/package.json
@@ -7,8 +7,12 @@
     "events": [
       {
         "event": "input",
-        "description": "Native input event triggered by user interaction. Emitted before any formatting and before the v-model is updated. Cancelable.",
+        "description": "Input event triggered by user interaction. Emitted before any formatting and before the v-model is updated. Cancelable.",
         "args": [
+          {
+            "arg": "value",
+            "description": "Current value of input"
+          },
           {
             "arg": "event",
             "description": "Native input event object"
@@ -25,7 +29,7 @@
           },
           {
             "arg": "event",
-            "description": "Native change event object (from before any formatting)"
+            "description": "Native change event object"
           }
         ]
       },

From b04338f1fa0d3eb0f12ecdd2b4e22ca1acee1374 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Sun, 28 Oct 2018 06:53:55 -0300
Subject: [PATCH 16/66] Update and rename form-formatting.js to form-text,js

Move common b-form-textarea/b-form-input data, props, computed, methods, watchers and lifecycle hooks to mixin
---
 src/mixins/form-formatting.js |  21 -------
 src/mixins/form-text,js       | 114 ++++++++++++++++++++++++++++++++++
 2 files changed, 114 insertions(+), 21 deletions(-)
 delete mode 100644 src/mixins/form-formatting.js
 create mode 100644 src/mixins/form-text,js

diff --git a/src/mixins/form-formatting.js b/src/mixins/form-formatting.js
deleted file mode 100644
index 4a38d4d223d..00000000000
--- a/src/mixins/form-formatting.js
+++ /dev/null
@@ -1,21 +0,0 @@
-export default {
-  props: {
-    formatter: {
-      type: Function,
-      value: null
-    },
-    lazyFormatter: {
-      type: Boolean,
-      value: false
-    }
-  },
-  methods: {
-    getFormatted (value, event = null) {
-      value = this.stringifyValue(value)
-      return this.formatter ? this.formatter(value, event) : value
-    },
-    stringifyValue (value) {
-      return value == null ? '' : String(value)
-    }
-  }
-}
diff --git a/src/mixins/form-text,js b/src/mixins/form-text,js
new file mode 100644
index 00000000000..42316df711a
--- /dev/null
+++ b/src/mixins/form-text,js
@@ -0,0 +1,114 @@
+export default {
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+    ariaInvalid: {
+      type: [Boolean, String],
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    plaintext: {
+      type: Boolean,
+      default: false
+    },
+    autocomplete: {
+      type: String,
+      default: null
+    },
+    placeholder: {
+      type: String,
+      default: null
+    },
+    formatter: {
+      type: Function,
+      value: null
+    },
+    lazyFormatter: {
+      type: Boolean,
+      value: false
+    }
+  },
+  model: {
+    prop: 'value',
+    event: 'update'
+  },
+  data () {
+    return {
+      localValue: this.stringifyValue(this.value)
+    }
+  },
+  watch: {
+    value (newVal, oldVal) {
+      this.setValue(this.lazyFormatter ? newVal : this.getFormatted(newVal, null))
+    }
+  },
+  mounted () {
+    this.setValue(this.lazyFormatter ? this.value : this.getFormatted(this.value, null))
+  },
+  computed: {
+    computedClass () {
+      return [
+        this.plaintext ? 'form-control-plaintext' : 'form-control',
+        this.sizeFormClass,
+        this.stateClass
+      ]
+    },
+    computedAriaInvalid () {
+      if (!this.ariaInvalid || this.ariaInvalid === 'false') {
+        // this.ariaInvalid is null or false or 'false'
+        return this.computedState === false ? 'true' : null
+      }
+      if (this.ariaInvalid === true) {
+        // User wants explicit aria-invalid=true
+        return 'true'
+      }
+      // Most likely a string value (which could be the string 'true')
+      return this.ariaInvalid
+    }
+  },
+  methods: {
+    stringifyValue (value) {
+      // We use == so that undefined will also equal null
+      return value == null ? '' : String(value)
+    },
+    getFormatted (value, event = null) {
+      value = this.stringifyValue(value)
+      return this.formatter ? this.formatter(value, event) : value
+    },
+    setValue (value) {
+      value = this.stringifyValue(value)
+      if (this.localValue !== value) {
+        // Update the v-model only if value has changed
+        this.localValue = value
+        this.$emit('update', value)
+      }
+    },
+    onInput (evt) {
+      this.$emit('input', evt.target.value, evt)
+      if (evt.defaultPrevented) return
+      const value = evt.target.value
+      this.updateValue(this.lazyFormatter ? value : this.getFormatted(value, evt))
+    },
+    onChange (evt) {
+      this.updateValue(this.getFormatted(evt.target.value, evt))
+      this.$emit('change', this.localValue, evt) }
+    },
+    focus () {
+      // For external handler that may want a focus method
+      if (!this.disabled) {
+        this.$el.focus()
+      }
+    },
+    blur () {
+      // For external handler that may want a blur method
+      if (!this.disabled) {
+        this.$el.blur()
+      }
+    }
+  }
+}

From 70f72e9835144e02c86c52c6a78f56edd5bb7c5f Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Sun, 28 Oct 2018 06:55:24 -0300
Subject: [PATCH 17/66] Add in formatter features

Migrate common props/data/methods/computed/hooks to mixin
---
 src/components/form-textarea/form-textarea.js | 108 +++---------------
 1 file changed, 13 insertions(+), 95 deletions(-)

diff --git a/src/components/form-textarea/form-textarea.js b/src/components/form-textarea/form-textarea.js
index 5b6edadbc44..59e30bb94a3 100644
--- a/src/components/form-textarea/form-textarea.js
+++ b/src/components/form-textarea/form-textarea.js
@@ -2,12 +2,21 @@ import idMixin from '../../mixins/id'
 import formMixin from '../../mixins/form'
 import formSizeMixin from '../../mixins/form-size'
 import formStateMixin from '../../mixins/form-state'
+import formTextMixin from '../../mixins/form-text'
 import formSelectionMixin from '../../mixins/form-selection'
 import formValidityMixin from '../../mixins/form-validity'
 import { getCS, isVisible } from '../../utils/dom'
 
 export default {
-  mixins: [idMixin, formMixin, formSizeMixin, formStateMixin, formSelectionMixin, formValidityMixin],
+  mixins: [
+    idMixin,
+    formMixin,
+    formSizeMixin,
+    formStateMixin,
+    formTextMixin,
+    formSelectionMixin,
+    formValidityMixin
+  ],
   render (h) {
     // using self instead of this helps reduce code size during minification
     const self = this
@@ -37,7 +46,7 @@ export default {
         'aria-invalid': self.computedAriaInvalid
       },
       domProps: {
-        value: self.value
+        value: self.localValue
       },
       on: {
         ...self.$listeners,
@@ -48,42 +57,10 @@ export default {
   },
   data () {
     return {
-      // We use the '==' operator here so that undefined will also equal null
-      // to ensure that value is always a string
-      localValue: this.value == null ? '' : String(this.value),
-      // If we cannot auto resize height
       dontResize: true
     }
   },
-  model: {
-    prop: 'value',
-    event: 'update'
-  },
   props: {
-    value: {
-      type: String,
-      default: ''
-    },
-    ariaInvalid: {
-      type: [Boolean, String],
-      default: false
-    },
-    readonly: {
-      type: Boolean,
-      default: false
-    },
-    plaintext: {
-      type: Boolean,
-      default: false
-    },
-    autocomplete: {
-      type: String,
-      default: null
-    },
-    placeholder: {
-      type: String,
-      default: null
-    },
     rows: {
       type: [Number, String],
       default: 2
@@ -98,21 +75,11 @@ export default {
       default: 'soft'
     },
     noResize: {
-      // Use CSS to disable the resize handle of textarea
+      // Disable the resize handle of textarea
       type: Boolean,
       default: false
     }
   },
-  watch: {
-    value (newVal, oldVal) {
-      // Update our localValue
-      if (newVal !== oldVal) {
-        // We use the '==' operator here so that undefined will also = null
-        // To ensure that value is always a string
-        this.updateValue(newVal == null ? '' : String(newVal))
-      }
-    }
-  },
   mounted () {
     // Enable opt-in resizing once mounted
     this.$nextTick(() => { this.dontResize = false })
@@ -126,13 +93,6 @@ export default {
     this.dontResize = true
   },
   computed: {
-    computedClass () {
-      return [
-        this.plaintext ? 'form-control-plaintext' : 'form-control',
-        this.sizeFormClass,
-        this.stateClass
-      ]
-    },
     computedStyle () {
       return {
         // setting noResize to true will disable the ability for the user to
@@ -142,18 +102,6 @@ export default {
         height: this.computedHeight
       }
     },
-    computedAriaInvalid () {
-      if (!this.ariaInvalid || this.ariaInvalid === 'false') {
-        // this.ariaInvalid is null or false or 'false'
-        return this.computedState === false ? 'true' : null
-      }
-      if (this.ariaInvalid === true) {
-        // User wants explicit aria-invalid=true
-        return 'true'
-      }
-      // Most likely a string value (which could be the string 'true')
-      return this.ariaInvalid
-    },
     computedMinRows () {
       // Ensure rows is at least 2 and positive (2 is the native textarea value)
       return Math.max(parseInt(this.rows, 10) || 2, 2)
@@ -167,7 +115,7 @@ export default {
     computedHeight () {
       const el = this.$el
 
-      // We compare this.localValue to null to ensure reactivity with content changes.
+      // We compare this.localValue to null to ensure reactivity of content changes.
       if (this.localValue === null || this.computedRows || this.dontResize || this.$isServer) {
         return null
       }
@@ -204,35 +152,5 @@ export default {
       // return the new computed height in px units
       return `${height}px`
     }
-  },
-  methods: {
-    updateValue (val) {
-      if (this.localValue !== val) {
-        // Update the v-model only if value has changed
-        this.localValue = val
-        this.$emit('update', this.localValue)
-      }
-    },
-    onInput (evt) {
-      this.$emit('input', evt)
-      if (evt.defaultPrevented) return
-      this.updateValue(evt.target.value)
-    },
-    onChange (evt) {
-      this.updateValue(evt.target.value)
-      this.$emit('change', this.localValue, evt)
-    },
-    focus () {
-      // For external handler that may want a focus method
-      if (!this.disabled) {
-        this.$el.focus()
-      }
-    },
-    blur () {
-      // For external handler that may want a blur method
-      if (!this.disabled) {
-        this.$el.blur()
-      }
-    }
   }
 }

From e73803508b035206c8f16d4b2980fe731dc04a73 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Sun, 28 Oct 2018 06:56:53 -0300
Subject: [PATCH 18/66] Rename form-text,js to form-text.js

---
 src/mixins/{form-text,js => form-text.js} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/mixins/{form-text,js => form-text.js} (100%)

diff --git a/src/mixins/form-text,js b/src/mixins/form-text.js
similarity index 100%
rename from src/mixins/form-text,js
rename to src/mixins/form-text.js

From b74da4e6b187d04009071eb184f1ccd7abecca34 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Sun, 28 Oct 2018 07:01:46 -0300
Subject: [PATCH 19/66] Update form-text.js

---
 src/mixins/form-text.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/mixins/form-text.js b/src/mixins/form-text.js
index 42316df711a..f798ed84ec4 100644
--- a/src/mixins/form-text.js
+++ b/src/mixins/form-text.js
@@ -96,7 +96,7 @@ export default {
     },
     onChange (evt) {
       this.updateValue(this.getFormatted(evt.target.value, evt))
-      this.$emit('change', this.localValue, evt) }
+      this.$emit('change', this.localValue, evt)
     },
     focus () {
       // For external handler that may want a focus method

From 5cddfba7e4d45c36c475b6fd0eebde2f4f408eb9 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Sun, 28 Oct 2018 07:43:10 -0300
Subject: [PATCH 20/66] Update README.md

---
 src/components/form-textarea/README.md | 97 +++++++++++++++++++++-----
 1 file changed, 78 insertions(+), 19 deletions(-)

diff --git a/src/components/form-textarea/README.md b/src/components/form-textarea/README.md
index 0c3dc957d29..69cd747e707 100644
--- a/src/components/form-textarea/README.md
+++ b/src/components/form-textarea/README.md
@@ -30,29 +30,28 @@ export default {
 ```
 
 ## Displayed rows
+To set the height of `<b-form-textarea>`, set the `rows` prop to the desired number of
+rows.  If no value is provided to `rows`, then it will default to `2` (the browser
+default and minimum acceptable value). Setting it to null or a value below two will
+result in the devault of `2` being used.
 
-`<b-form-textarea>` automaticlly adjusts its height (text rows) to fit the content,
-even as the user enters text. For a textarea with no content, the number of rows
-starts at `1`.
+### Disable resize handle
+Some web browsers will allow the user to re-size the hight of the textarea.
+To disable this feature, set the `no-resize` prop to `true`.
+
+
+### Auto height
+`<b-form-textarea>` can also automaticlly adjust its height (text rows) to fit the content,
+even as the user enters text.
 
 To set the initial minimum height (in rows), set the `rows` prop to the desired
-number of lines. If no value is provided to `rows`, then it will default to `1`.
+number of lines (or leave it at hte default of `2`).
 
 To limit the maximum rows that the text area will grow to (before showing a scrollbar),
 set the `max-rows` prop to the maximum number of lines of text.
 
-To keep the text-area at a set height, set both `rows` and `max-rows` to the same value.
-
-**Note:** auto rows will only work when the user explicitly enters newlines in the textarea.
-
-### Disable resize
-
-Note that some web browsers will allow the user to re-size the hight of the textarea.
-To disable this, set the `no-resize` prop to `true`.
-
-
-## Contextual states
 
+## Textarea contextual states
 Bootstrap includes validation styles for `valid` and `invalid` states on most form controls.
 
 Generally speaking, you’ll want to use a particular state for specific types of feedback:
@@ -88,7 +87,6 @@ export default {
 ```
 
 ### Conveying contextual state to assistive technologies and colorblind users
-
 Using these contextual states to denote the state of a form control only provides a
 visual, color-based indication, which will not be conveyed to users of assistive
 technologies - such as screen readers - or to colorblind users.
@@ -98,11 +96,10 @@ include a hint about state in the form control's `<label>` text itself, or by pr
 an additional help text block.
 
 ### ARIA `aria-invalid` attribute
-
 When `<b-form-textarea>` has an invalid contextual state (i.e. `'invalid'` or `false`)
 you may also want to set the prop `aria-invalid` to `true`, or one of hte supported values:
 
-- `false`: No errors detected (default)
+- `false`: No errors (default)
 - `true` or `'true'`: The value has failed validation.
 - `'grammar'`: A grammatical error has been detected.
 - `'spelling'` A spelling error has been detected.
@@ -112,8 +109,12 @@ not explicity set, `<b-form-textarea>` will automatically set the `aria-invalid`
 attribute to `'true'`.
 
 
-## Readonly plain text
+## Formatter support
+Refer to the (`<b-form-input>`)[../form-input] documentation regarding usage of the
+optional formatter feature.
+
 
+## Readonly plain text
 If you want to have `<b-form-textarea readonly>` elements in your form styled as plain
 text, set the `plaintext` prop (no need to set `readonly`) to remove the default form
 field styling and preserve the correct margin and padding and height.
@@ -136,6 +137,64 @@ export default {
 <!-- form-textarea-plaintext.vue -->
 ```
 
+## Native and custom events
+All native events (other than the cuustom `input` and `change` events) are supported, without
+the need for the `.native` modifier.
+
+The custom `input` and `change` events receive to paramters: the input `value`, and the native
+event `object`. The custom `update` event is passed the input value.
+
+The `input` event is emitted based on user interaction, before any formatting, and before
+the `v-model` is updated. You can cancel the input event by callling `preventDefault()` on
+the passed event object.
+
+The `update` event is emitted when updating the `v-model`, and will include any formatting that has
+been applied. 
+
+The `change` event is emitted based on user interaction (typically on blur, but also may fire
+on composition events depending on the browser). The value passed will include any applied formatting.
+
+You can always access the native `input` and `change` events by using the `.native` modifier.
+
+
+## Exposed input properties and methods
+`<b-form-input>` exposes several of the native input element's properties and methods on the 
+component reference (i.e. assign a `ref` to your `<b-form-input ref="foo" ...>` and
+use `this.$refs['foo'].propertyName` or `this.$refs['foo'].methodName(...)`).
+
+### Input Properties
+
+| Property | Notes
+| -------- | -----
+| `.selectionStart` | Read/Write
+| `.selectionEnd` | Read/Write
+| `.selectionDirection` | Read/Write
+| `.validity` | Read only
+| `.validationMessage` | Read only
+| `.willValidate` | Read only
+
+### Input Methods
+
+| Method | Notes
+| ------ | -----
+| `.focus()` | Focus the input
+| `.blur()` | Remove focus from the input
+| `.select()` | Selects all text within the input
+| `.setSelectionRange()` | 
+| `.setRangeText()` | 
+| `.setCustomValidity()` | 
+| `.checkValidity()` | 
+| `.reportValidity()` | 
+
+Refer to https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement for
+more information on these methods and properties.  Support will vary based on
+input type.
+
+### Custom input methods
+`b-form-input` also exposes the following custom method(s):
+
+
+
 ## Component alias
 You can use `<b-form-textarea>` by it's shorter alias `<b-textarea>`.
 

From 550d5a0aa01196355396dae51d4ddc6b2b49a82e Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Sun, 28 Oct 2018 07:44:52 -0300
Subject: [PATCH 21/66] Update form-text.js

---
 src/mixins/form-text.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/mixins/form-text.js b/src/mixins/form-text.js
index f798ed84ec4..b21e8170f2d 100644
--- a/src/mixins/form-text.js
+++ b/src/mixins/form-text.js
@@ -92,10 +92,10 @@ export default {
       this.$emit('input', evt.target.value, evt)
       if (evt.defaultPrevented) return
       const value = evt.target.value
-      this.updateValue(this.lazyFormatter ? value : this.getFormatted(value, evt))
+      this.setValue(this.lazyFormatter ? value : this.getFormatted(value, evt))
     },
     onChange (evt) {
-      this.updateValue(this.getFormatted(evt.target.value, evt))
+      this.setValue(this.getFormatted(evt.target.value, evt))
       this.$emit('change', this.localValue, evt)
     },
     focus () {

From 474a394ad013c2fa8ef220326336affbbf257f84 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Sun, 28 Oct 2018 07:54:47 -0300
Subject: [PATCH 22/66] Update README.md

---
 src/components/form-textarea/README.md | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/form-textarea/README.md b/src/components/form-textarea/README.md
index 69cd747e707..3ec7400c8bc 100644
--- a/src/components/form-textarea/README.md
+++ b/src/components/form-textarea/README.md
@@ -175,16 +175,16 @@ use `this.$refs['foo'].propertyName` or `this.$refs['foo'].methodName(...)`).
 
 ### Input Methods
 
-| Method | Notes
-| ------ | -----
-| `.focus()` | Focus the input
-| `.blur()` | Remove focus from the input
-| `.select()` | Selects all text within the input
-| `.setSelectionRange()` | 
-| `.setRangeText()` | 
-| `.setCustomValidity()` | 
-| `.checkValidity()` | 
-| `.reportValidity()` | 
+| Method | Notes |
+| ------ | ----- |
+| `.focus()` | Focus the input |
+| `.blur()` | Remove focus from the input |
+| `.select()` | Selects all text within the input |
+| `.setSelectionRange()` |  |
+| `.setRangeText()` |  |
+| `.setCustomValidity()` |  |
+| `.checkValidity()` |  |
+| `.reportValidity()` |  |
 
 Refer to https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement for
 more information on these methods and properties.  Support will vary based on

From 6e707ac043080b0398f6a561235aa40f033c1727 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Sun, 28 Oct 2018 08:00:57 -0300
Subject: [PATCH 23/66] Update README.md

---
 src/components/form-textarea/README.md | 30 +++++++++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/src/components/form-textarea/README.md b/src/components/form-textarea/README.md
index 3ec7400c8bc..d44442676f4 100644
--- a/src/components/form-textarea/README.md
+++ b/src/components/form-textarea/README.md
@@ -39,7 +39,6 @@ result in the devault of `2` being used.
 Some web browsers will allow the user to re-size the hight of the textarea.
 To disable this feature, set the `no-resize` prop to `true`.
 
-
 ### Auto height
 `<b-form-textarea>` can also automaticlly adjust its height (text rows) to fit the content,
 even as the user enters text.
@@ -50,6 +49,35 @@ number of lines (or leave it at hte default of `2`).
 To limit the maximum rows that the text area will grow to (before showing a scrollbar),
 set the `max-rows` prop to the maximum number of lines of text.
 
+## Control sizing
+Set text heights using the `size` prop to `sm` or `lg` for small or large respectively.
+
+To control width, place the input inside standard Bootstrap grid column.
+
+```html
+<b-container fluid>
+  <b-row class="my-1">
+    <b-col sm="2"><label for="input-small">Small:</label></b-col>
+    <b-col sm="10">
+      <b-form-textarea id="input-small" size="sm" type="text" placeholder="Small Textarea"></b-form-textarea>
+    </b-col>
+  </b-row>
+  <b-row class="my-1">
+    <b-col sm="2"><label for="input-default">Default:</label></b-col>
+    <b-col sm="10">
+      <b-form-textarea id="input-default" type="text" placeholder="Default Textarea"></b-form-text-area>
+    </b-col>
+  </b-row>
+  <b-row class="my-1">
+    <b-col sm="2"><label for="input-large">Large:</label></b-col>
+    <b-col sm="10">
+      <b-form-textarea id="input-large" size="lg" type="text" placeholder="Large Textarea"></b-form-textarea>
+    </b-col>
+  </b-row>
+</b-container>
+
+<!-- form-textarea-size-1.vue -->
+```
 
 ## Textarea contextual states
 Bootstrap includes validation styles for `valid` and `invalid` states on most form controls.

From 585f94faff31cca5be23b9ff7626e3a5f6ea2a43 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Sun, 28 Oct 2018 16:31:41 -0300
Subject: [PATCH 24/66] Update form-textarea.js

---
 src/components/form-textarea/form-textarea.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/form-textarea/form-textarea.js b/src/components/form-textarea/form-textarea.js
index 59e30bb94a3..d8e03a93644 100644
--- a/src/components/form-textarea/form-textarea.js
+++ b/src/components/form-textarea/form-textarea.js
@@ -88,7 +88,7 @@ export default {
     // If we are being re-activated in <keep-alive>, enable opt-in resizing
     this.$nextTick(() => { this.dontResize = false })
   },
-  dectivated () {
+  deactivated () {
     // If we are in a deactivated <keep-alive>, disable opt-in resizing
     this.dontResize = true
   },

From 9a0dd3a75dc272df9d99a7f56774d7450052cb53 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Sun, 28 Oct 2018 17:41:35 -0300
Subject: [PATCH 25/66] Update form-textarea.spec.js

---
 .../form-textarea/form-textarea.spec.js       | 286 +++++++++++++++++-
 1 file changed, 283 insertions(+), 3 deletions(-)

diff --git a/src/components/form-textarea/form-textarea.spec.js b/src/components/form-textarea/form-textarea.spec.js
index d38c49b111f..5e2c8064efe 100644
--- a/src/components/form-textarea/form-textarea.spec.js
+++ b/src/components/form-textarea/form-textarea.spec.js
@@ -1,6 +1,286 @@
-import {loadFixture, testVM} from '../../../tests/utils'
+import Textarea from './form-textarea'
+import { mount } from '@vue/test-utils'
 
 describe('form-textarea', async () => {
-  beforeEach(loadFixture(__dirname, 'form-textarea'))
-  testVM()
+
+  it('root element is textarea', async () => {
+    const input = mount(Textarea)
+    expect(input.element.type).toBe('textarea')
+  })
+
+  it('does not have attribute readonly by default', async () => {
+    const input = mount(Textarea)
+    expect(input.attributes('readonly')).not.toBeDefined()
+  })
+
+  it('has attribute readonly when readonly=true', async () => {
+    const input = mount(Textarea, {
+      propsData: {
+        readonly: true
+      }
+    })
+    expect(input.attributes('readonly')).toBeDefined()
+  })
+
+  it('does not have attribute disabled by default', async () => {
+    const input = mount(Textarea)
+    expect(input.attributes('readonly')).not.toBeDefined()
+  })
+
+  it('has attribute disabled when disabled=true', async () => {
+    const input = mount(Textarea, {
+      propsData: {
+        disabled: true
+      }
+    })
+    expect(input.attributes('readonly')).toBeDefined()
+  })
+
+  it('has class form-control by default', async () => {
+    const input = mount(Textarea)
+    expect(input.classes()).toContain('form-control')
+  })
+
+  it('does not have class form-control-plaintext by default', async () => {
+    const input = mount(Textarea)
+    expect(input.classes()).not.toContain('form-control-plaintext')
+  })
+
+  it('does not have size classes by default', async () => {
+    const input = mount(Textarea)
+    expect(input.classes()).not.toContain('form-control-sm')
+    expect(input.classes()).not.toContain('form-control-lg')
+  })
+
+  it('has size class when size prop is set', async () => {
+    const input = mount(Textarea, {
+      propsData: {
+        size: 'sm'
+      }
+    })
+    expect(input.classes()).toContain('form-control-sm')
+    input.setProps({ size: 'lg' })
+    expect(input.classes()).toContain('form-control-lg')
+    input.setProps({ size: 'foobar' })
+    expect(input.classes()).toContain('form-control-foobar')
+    input.setProps({ size: '' })
+    expect(input.classes()).not.toContain('form-control-')
+  })
+
+  it('has class form-control-plaintext when plaintext=true', async () => {
+    const input = mount(Textarea, {
+      propsData: {
+        plaintext: true
+      }
+    })
+    expect(input.classes()).toContain('form-control-plaintext')
+  })
+
+  it('does not have class form-control when plaintext=true', async () => {
+    const input = mount(Textarea, {
+      propsData: {
+        plaintext: true
+      }
+    })
+    expect(input.classes()).not.toContain('form-control')
+  })
+  
+  it('has attribute readonly when plaintext=true', async () => {
+    const input = mount(Textarea, {
+      propsData: {
+        plaintext: true
+      }
+    })
+    expect(input.attributes('readonly')).toBeDefined()
+  })
+
+  it('has user supplied id', async () => {
+    const input = mount(Textarea, {
+      propsData: {
+        id: 'foobar'
+      }
+    })
+    expect(input.attributes('id')).toBe('foobar')
+  })
+
+  it('does not have is-valid or is-invalid classes by default', async () => {
+    const input = mount(Textarea)
+    expect(input.classes()).not.toContain('is-valid')
+    expect(input.classes()).not.toContain('is-invalid')
+  })
+
+  it('has class is-valid when state=true', async () => {
+    const input = mount(Textarea, {
+      propsData: {
+        state: true
+      }
+    })
+    expect(input.classes()).toContain('is-valid')
+    expect(input.classes()).not.toContain('is-invalid')
+    input.setProps({ state: 'true' })
+    expect(input.classes()).toContain('is-valid')
+    expect(input.classes()).not.toContain('is-invalid')
+  })
+
+  it('has class is-valid when state=valid', async () => {
+    const input = mount(Textarea, {
+      propsData: {
+        state: 'valid'
+      }
+    })
+    expect(input.classes()).toContain('is-valid')
+    expect(input.classes()).not.toContain('is-invalid')
+  })
+
+  it('has class is-invalid when state=false', async () => {
+    const input = mount(Textarea, {
+      propsData: {
+        state: false
+      }
+    })
+    expect(input.classes()).toContain('is-invalid')
+    expect(input.classes()).not.toContain('is-valid')
+  })
+
+  it('has class is-invalid when state=invalid', async () => {
+    const input = mount(Textarea, {
+      propsData: {
+        state: 'invalid'
+      }
+    })
+    expect(input.classes()).toContain('is-invalid')
+    expect(input.classes()).not.toContain('is-valid')
+  })
+
+  it('does not have aria-invalid attribute by default', async () => {
+    const input = mount(Textarea)
+    expect(input.contains('[aria-invalid]')).toBe(false)
+  })
+
+  it('does not have aria-invalid attribute when state is true', async () => {
+    const input = mount(Textarea, {
+      propsData: {
+        state: true
+      }
+    })
+    expect(wrapper.contains('[aria-invalid]')).toBe(false)
+    input.setProps({ state: 'true' })
+    expect(wrapper.contains('[aria-invalid]')).toBe(false)
+  })
+
+  it('has aria-invalid attribute when state=false', async () => {
+    const input = mount(Textarea, {
+      propsData: {
+        state: false
+      }
+    })
+    expect(input.attributes('aria-invalid')).toBe('true')
+  })
+
+  it('has aria-invalid attribute when aria-invalid=true', async () => {
+    const input = mount(Textarea, {
+      propsData: {
+        ariaInvalid: true
+      }
+    })
+    expect(input.attributes('aria-invalid')).toBe('true')
+    input.setProps({ ariaInvalid: 'true' })
+    expect(input.attributes('aria-invalid')).toBe('true')
+  })
+
+  it('has aria-invalid attribute when aria-invalid="spelling"', async () => {
+    const input = mount(Textarea, {
+      propsData: {
+        ariaInvalid: 'spelling'
+      }
+    })
+    expect(input.attributes('aria-invalid')).toBe('spelling')
+  })
+
+  it('emits an input event with args value and event', async () => {
+    const input = mount(Textarea)
+
+    input.element.value = 'test'
+    input.trigger('input')
+
+    expect(input.emitted('input')).toBeDefined()
+    expect(input.emitted('input')[0][0]).toEqual('test')
+    expect(input.emitted('input')[0].length).toEqual(2)
+    expect(input.emitted('input')[0][0].type).toEqual('input')
+  })
+
+  it('emits an change event args value and event', async () => {
+    const input = mount(Textarea)
+
+    input.element.value = 'test'
+    input.trigger('input')
+    expect(input.emitted('change')).not.toBeDefined()
+
+    input.trigger('change')
+    expect(input.emitted('change')).toBeDefined()
+    expect(input.emitted('change')[0][0]).toEqual('test')
+    expect(input.emitted('change')[0].length).toEqual(2)
+    expect(input.emitted('change')[0][0].type).toEqual('change')
+  })
+
+  it('does not emit an update event on mount when value not set', async () => {
+    const input = mount(Textarea)
+    expect(input.emitted('update')).not.toBeDefined()
+  })
+
+  it('does mot emit an update event on mount when value is set and no formatter', async () => {
+    const input = mount(Textarea, {
+      value: 'foobar'
+    })
+    expect(input.emitted('update')).not.toBeDefined()
+  })
+
+  it('emits an update event with one arg on input', async () => {
+    const input = mount(Textarea)
+
+    input.element.value = 'test'
+    input.trigger('input')
+    expect(input.emitted('update')).toBeDefined()
+    expect(input.emitted('update')[0][0]).toEqual('test')
+    expect(input.emitted('update')[0].length).toEqual(1)
+  })
+
+  it('emits an update event with one arg on change', async () => {
+    const input = mount(Textarea)
+
+    input.element.value = 'test'
+    input.trigger('input')
+    expect(input.emitted('update')).toBeDefined()
+    expect(input.emitted('update').length).toEqual(1)
+    expect(input.emitted('update')[0][0]).toEqual('test')
+    input.trigger('change')
+    expect(input.emitted('change').length).toEqual(2)
+    expect(input.emitted('update')[1][0]).toEqual('test')
+  })
+
+  it('emits a native focus event', async () => {
+    const spy = jest.fn()
+    const input = mount(Textarea, {
+      listeners: {
+        focus: spy
+      }
+    })
+    input.trigger('focus')
+    expect(input.emitted('focus')).not.toBeDefined()
+    expect(spy).toHaveBeenCalled()
+  })
+
+  it('emits a native blur event', async () => {
+    const spy = jest.fn()
+    const input = mount(Textarea, {
+      listeners: {
+        blur: spy
+      }
+    })
+    input.trigger('blur')
+    expect(input.emitted('blur')).not.toBeDefined()
+    expect(spy).toHaveBeenCalled()
+  })
+
+  // To be added: Formatter tests
 })

From 7ead478a883145e6b29e16541ced9f0365f29f6f Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Sun, 28 Oct 2018 17:58:37 -0300
Subject: [PATCH 26/66] Update form-textarea.spec.js

---
 .../form-textarea/form-textarea.spec.js       | 64 +++++++++++++------
 1 file changed, 43 insertions(+), 21 deletions(-)

diff --git a/src/components/form-textarea/form-textarea.spec.js b/src/components/form-textarea/form-textarea.spec.js
index 5e2c8064efe..5e4fcd3bb43 100644
--- a/src/components/form-textarea/form-textarea.spec.js
+++ b/src/components/form-textarea/form-textarea.spec.js
@@ -2,40 +2,49 @@ import Textarea from './form-textarea'
 import { mount } from '@vue/test-utils'
 
 describe('form-textarea', async () => {
-
   it('root element is textarea', async () => {
     const input = mount(Textarea)
     expect(input.element.type).toBe('textarea')
   })
 
-  it('does not have attribute readonly by default', async () => {
+  it('does not have attribute disabled by default', async () => {
     const input = mount(Textarea)
-    expect(input.attributes('readonly')).not.toBeDefined()
+    expect(input.attributes('disabled')).not.toBeDefined()
   })
 
-  it('has attribute readonly when readonly=true', async () => {
+  it('has attribute disabled when disabled=true', async () => {
     const input = mount(Textarea, {
       propsData: {
-        readonly: true
+        disabled: true
       }
     })
-    expect(input.attributes('readonly')).toBeDefined()
+    expect(input.attributes('disabled')).toBeDefined()
   })
 
-  it('does not have attribute disabled by default', async () => {
+  it('does not have attribute readonly by default', async () => {
     const input = mount(Textarea)
     expect(input.attributes('readonly')).not.toBeDefined()
   })
 
-  it('has attribute disabled when disabled=true', async () => {
+  it('has attribute readonly when readonly=true', async () => {
     const input = mount(Textarea, {
       propsData: {
-        disabled: true
+        readonly: true
       }
     })
     expect(input.attributes('readonly')).toBeDefined()
   })
 
+  it('inherits non-prop attributes', async () => {
+    const input = mount(Textarea, {
+      attrs: {
+        foo: 'bar'
+      }
+    })
+    expect(input.attributes('foo')).toBeDefined()
+    expect(input.attributes('foo')).toBe('bar')
+  })
+
   it('has class form-control by default', async () => {
     const input = mount(Textarea)
     expect(input.classes()).toContain('form-control')
@@ -84,7 +93,7 @@ describe('form-textarea', async () => {
     })
     expect(input.classes()).not.toContain('form-control')
   })
-  
+
   it('has attribute readonly when plaintext=true', async () => {
     const input = mount(Textarea, {
       propsData: {
@@ -117,9 +126,6 @@ describe('form-textarea', async () => {
     })
     expect(input.classes()).toContain('is-valid')
     expect(input.classes()).not.toContain('is-invalid')
-    input.setProps({ state: 'true' })
-    expect(input.classes()).toContain('is-valid')
-    expect(input.classes()).not.toContain('is-invalid')
   })
 
   it('has class is-valid when state=valid', async () => {
@@ -157,15 +163,22 @@ describe('form-textarea', async () => {
     expect(input.contains('[aria-invalid]')).toBe(false)
   })
 
-  it('does not have aria-invalid attribute when state is true', async () => {
+  it('does not have aria-invalid attribute when state=true', async () => {
     const input = mount(Textarea, {
       propsData: {
         state: true
       }
     })
-    expect(wrapper.contains('[aria-invalid]')).toBe(false)
-    input.setProps({ state: 'true' })
-    expect(wrapper.contains('[aria-invalid]')).toBe(false)
+    expect(input.contains('[aria-invalid]')).toBe(false)
+  })
+
+  it('does not have aria-invalid attribute when state=valid', async () => {
+    const input = mount(Textarea, {
+      propsData: {
+        state: 'valid'
+      }
+    })
+    expect(input.contains('[aria-invalid]')).toBe(false)
   })
 
   it('has aria-invalid attribute when state=false', async () => {
@@ -177,6 +190,15 @@ describe('form-textarea', async () => {
     expect(input.attributes('aria-invalid')).toBe('true')
   })
 
+  it('has aria-invalid attribute when state=invalid', async () => {
+    const input = mount(Textarea, {
+      propsData: {
+        state: 'invalid'
+      }
+    })
+    expect(input.attributes('aria-invalid')).toBe('true')
+  })
+
   it('has aria-invalid attribute when aria-invalid=true', async () => {
     const input = mount(Textarea, {
       propsData: {
@@ -206,7 +228,7 @@ describe('form-textarea', async () => {
     expect(input.emitted('input')).toBeDefined()
     expect(input.emitted('input')[0][0]).toEqual('test')
     expect(input.emitted('input')[0].length).toEqual(2)
-    expect(input.emitted('input')[0][0].type).toEqual('input')
+    expect(input.emitted('input')[0][1].type).toEqual('input')
   })
 
   it('emits an change event args value and event', async () => {
@@ -220,7 +242,7 @@ describe('form-textarea', async () => {
     expect(input.emitted('change')).toBeDefined()
     expect(input.emitted('change')[0][0]).toEqual('test')
     expect(input.emitted('change')[0].length).toEqual(2)
-    expect(input.emitted('change')[0][0].type).toEqual('change')
+    expect(input.emitted('change')[0][1].type).toEqual('change')
   })
 
   it('does not emit an update event on mount when value not set', async () => {
@@ -241,8 +263,8 @@ describe('form-textarea', async () => {
     input.element.value = 'test'
     input.trigger('input')
     expect(input.emitted('update')).toBeDefined()
-    expect(input.emitted('update')[0][0]).toEqual('test')
     expect(input.emitted('update')[0].length).toEqual(1)
+    expect(input.emitted('update')[0][0]).toEqual('test')
   })
 
   it('emits an update event with one arg on change', async () => {
@@ -254,7 +276,7 @@ describe('form-textarea', async () => {
     expect(input.emitted('update').length).toEqual(1)
     expect(input.emitted('update')[0][0]).toEqual('test')
     input.trigger('change')
-    expect(input.emitted('change').length).toEqual(2)
+    expect(input.emitted('update').length).toEqual(2)
     expect(input.emitted('update')[1][0]).toEqual('test')
   })
 

From c20ecfed348cfee5eab58f54492249571d36e8cf Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Sun, 28 Oct 2018 18:03:44 -0300
Subject: [PATCH 27/66] Update form-textarea.spec.js

---
 .../form-textarea/form-textarea.spec.js         | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/components/form-textarea/form-textarea.spec.js b/src/components/form-textarea/form-textarea.spec.js
index 5e4fcd3bb43..37d4fcacd40 100644
--- a/src/components/form-textarea/form-textarea.spec.js
+++ b/src/components/form-textarea/form-textarea.spec.js
@@ -267,7 +267,7 @@ describe('form-textarea', async () => {
     expect(input.emitted('update')[0][0]).toEqual('test')
   })
 
-  it('emits an update event with one arg on change', async () => {
+  it('does not emit an update event on change when value not changed', async () => {
     const input = mount(Textarea)
 
     input.element.value = 'test'
@@ -276,8 +276,21 @@ describe('form-textarea', async () => {
     expect(input.emitted('update').length).toEqual(1)
     expect(input.emitted('update')[0][0]).toEqual('test')
     input.trigger('change')
+    expect(input.emitted('update').length).toEqual(1)
+  })
+
+  it('emits an update event with one arg on change when value changed', async () => {
+    const input = mount(Textarea)
+
+    input.element.value = 'test'
+    input.trigger('input')
+    expect(input.emitted('update')).toBeDefined()
+    expect(input.emitted('update').length).toEqual(1)
+    expect(input.emitted('update')[0][0]).toEqual('test')
+    input.element.value = 'TEST'
+    input.trigger('change')
     expect(input.emitted('update').length).toEqual(2)
-    expect(input.emitted('update')[1][0]).toEqual('test')
+    expect(input.emitted('update')[1][0]).toEqual('TEST')
   })
 
   it('emits a native focus event', async () => {

From 902ef7a621988e5e0c3abe575af8938fb3eda8ef Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Sun, 28 Oct 2018 19:02:02 -0300
Subject: [PATCH 28/66] Update form-textarea.spec.js

---
 .../form-textarea/form-textarea.spec.js       | 196 +++++++++++++++++-
 1 file changed, 195 insertions(+), 1 deletion(-)

diff --git a/src/components/form-textarea/form-textarea.spec.js b/src/components/form-textarea/form-textarea.spec.js
index 37d4fcacd40..6d97f36311b 100644
--- a/src/components/form-textarea/form-textarea.spec.js
+++ b/src/components/form-textarea/form-textarea.spec.js
@@ -317,5 +317,199 @@ describe('form-textarea', async () => {
     expect(spy).toHaveBeenCalled()
   })
 
-  // To be added: Formatter tests
+  it('has attribute rows set to 2 by default', async () => {
+    const input = mount(Textarea)
+    expect(input.attributes('rows')).toBeDefined()
+    expect(input.attributes('rows')).toEqual('2')
+  })
+
+  it('has attribute rows when rows set and max-rows not set', async () => {
+    const input = mount(Textarea, {
+      propsData: {
+        rows: 10
+      }
+    })
+    expect(input.attributes('rows')).toBeDefined()
+    expect(input.attributes('rows')).toEqual('10')
+    // should work with both text and number values
+    input.setProps({ rows: '20' })
+    expect(input.attributes('rows')).toBeDefined()
+    expect(input.attributes('rows')).toEqual('20')
+    // Should use minimum value of 2 when rows is set less than 2
+    input.setProps({ rows: '1' })
+    expect(input.attributes('rows')).toBeDefined()
+    expect(input.attributes('rows')).toEqual('2')
+    input.setProps({ rows: -10 })
+    expect(input.attributes('rows')).toBeDefined()
+    expect(input.attributes('rows')).toEqual('2')
+  })
+
+  it('has attribute rows set when rows and max-rows are equal', async () => {
+    const input = mount(Textarea, {
+      propsData: {
+        rows: 5,
+        maxRows: 5 
+      }
+    })
+    expect(input.attributes('rows')).toBeDefined()
+    expect(input.attributes('rows')).toEqual('5')
+    // should work with both text and number values
+    input.setProps({ rows: '10', maxRows: '10' })
+    expect(input.attributes('rows')).toBeDefined()
+    expect(input.attributes('rows')).toEqual('10')
+  })
+
+  it('does not have rows set when rows and max-rows set', async () => {
+    const input = mount(Textarea, {
+      propsData: {
+        rows: 2,
+        maxRows: 5 
+      }
+    })
+    expect(input.attributes('rows')).not.toBeDefined()
+  })
+
+  it('has attribute rows set when max-rows less than rows', async () => {
+    const input = mount(Textarea, {
+      propsData: {
+        rows: 10,
+        maxRows: 5 
+      }
+    })
+    expect(input.attributes('rows')).toBeDefined()
+    expect(input.attributes('rows')).toEqual('10')
+  })
+
+  it('does not have style resize by default', async () => {
+    const input = mount(Textarea, {
+      attachToDocument: true
+    })
+    expect(input.element.style).toBeDefined()
+    expect(input.element.style.resize).toEqual('')
+  })
+
+  it('does not have style resize when no-resize is set', async () => {
+    const input = mount(Textarea, {
+      attachToDocument: true,
+      propsData: {
+        noResize: true 
+      }
+    })
+    expect(input.element.style).toBeDefined()
+    expect(input.element.style.resize).toEqual('none')
+  })
+
+  it('does not have style resize when max-rows not set', async () => {
+    const input = mount(Textarea, {
+      attachToDocument: true,
+      propsData: {
+        rows: 10
+      }
+    })
+    expect(input.element.style).toBeDefined()
+    expect(input.element.style.resize).toEqual('')
+  })
+
+  it('does not have style resize when max-rows less than rows', async () => {
+    const input = mount(Textarea, {
+      attachToDocument: true,
+      propsData: {
+        rows: 10,
+        maxRows: 5
+      }
+    })
+    expect(input.element.style).toBeDefined()
+    expect(input.element.style.resize).toEqual('')
+  })
+
+  it('has style resize:none when max-rows greater than rows', async () => {
+    const input = mount(Textarea, {
+      attachToDocument: true,
+      propsData: {
+        rows: 2,
+        maxRows: 5 
+      }
+    })
+    expect(input.element.style).toBeDefined()
+    expect(input.element.style.resize).toBeDefined()
+    expect(input.element.style.resize).toEqual('none')
+  })
+
+  it('does not have style height by default', async () => {
+    const input = mount(Textarea, {
+      attachToDocument: true
+    })
+    expect(input.element.style).toBeDefined()
+    expect(input.element.style.height).toBeDefined()
+    expect(input.element.style.height).toEqual('')
+  })
+
+  it('does not have style height when rows and max-rows equal', async () => {
+    const input = mount(Textarea, {
+      attachToDocument: true,
+      propsData: {
+        rows: 2,
+        maxRows: 2
+      }
+    })
+    expect(input.element.style).toBeDefined()
+    expect(input.element.style.height).toBeDefined()
+    expect(input.element.style.height).toEqual('')
+  })
+
+  it('does not have style height when max-rows not set', async () => {
+    const input = mount(Textarea, {
+      attachToDocument: true,
+      propsData: {
+        rows: 5
+      }
+    })
+    expect(input.element.style).toBeDefined()
+    expect(input.element.style.height).toBeDefined()
+    expect(input.element.style.height).toEqual('')
+  })
+
+  it('has style height when max-rows greater than rows', async () => {
+    const input = mount(Textarea, {
+      attachToDocument: true,
+      propsData: {
+        rows: 2,
+        maxRows: 5 
+      }
+    })
+    expect(input.element.style).toBeDefined()
+    expect(input.element.style.height).toBeDefined()
+    expect(input.element.style.height).not.toEqual('')
+  })
+
+  it('auto height should work', async () => {
+    const input = mount(Textarea, {
+      attachToDocument: true,
+      propsData: {
+        value: '',
+        rows: 2,
+        maxRows: 10 
+      }
+    })
+    expect(input.element.style).toBeDefined()
+    expect(input.element.style.height).toBeDefined()
+    expect(input.element.style.height).not.toEqual('')
+    const firstHeight = parseFloat(input.element.style.height)
+    // Set content to five lines heigh
+    input.element.value = 'one\n two\n three\n four\n five'
+    input.trigger('input')
+    expect(input.emitted('update')).toBeDefined()
+    expect(input.element.style.height).not.toEqual('')
+    const secondHeight = parseFloat(input.element.style.height)
+    expect(secondHeight).toBeGreaterThan(startheight)
+    // Set content to one lines heigh
+    input.element.value = 'one'
+    input.trigger('input')
+    expect(input.emitted('update').length).toEqual(2)
+    expect(input.element.style.height).not.toEqual('')
+    const thirdHeight = parseFloat(input.element.style.height)
+    expect(thirdHeight).toBeLessThan(startheight)
+  })
+
+  // To be added: Formatter tests (copy from form-input.spec.js
 })

From a43e3e6d7c748a89237ab27fc100c1a312824159 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Sun, 28 Oct 2018 19:10:52 -0300
Subject: [PATCH 29/66] Commended out auto height testing

Teh calculation for style height do not appear to work in the test environment.
---
 .../form-textarea/form-textarea.spec.js       | 24 ++++++++++++-------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/components/form-textarea/form-textarea.spec.js b/src/components/form-textarea/form-textarea.spec.js
index 6d97f36311b..2401fb73a90 100644
--- a/src/components/form-textarea/form-textarea.spec.js
+++ b/src/components/form-textarea/form-textarea.spec.js
@@ -348,7 +348,7 @@ describe('form-textarea', async () => {
     const input = mount(Textarea, {
       propsData: {
         rows: 5,
-        maxRows: 5 
+        maxRows: 5
       }
     })
     expect(input.attributes('rows')).toBeDefined()
@@ -363,7 +363,7 @@ describe('form-textarea', async () => {
     const input = mount(Textarea, {
       propsData: {
         rows: 2,
-        maxRows: 5 
+        maxRows: 5
       }
     })
     expect(input.attributes('rows')).not.toBeDefined()
@@ -373,7 +373,7 @@ describe('form-textarea', async () => {
     const input = mount(Textarea, {
       propsData: {
         rows: 10,
-        maxRows: 5 
+        maxRows: 5
       }
     })
     expect(input.attributes('rows')).toBeDefined()
@@ -392,7 +392,7 @@ describe('form-textarea', async () => {
     const input = mount(Textarea, {
       attachToDocument: true,
       propsData: {
-        noResize: true 
+        noResize: true
       }
     })
     expect(input.element.style).toBeDefined()
@@ -427,7 +427,7 @@ describe('form-textarea', async () => {
       attachToDocument: true,
       propsData: {
         rows: 2,
-        maxRows: 5 
+        maxRows: 5
       }
     })
     expect(input.element.style).toBeDefined()
@@ -469,12 +469,17 @@ describe('form-textarea', async () => {
     expect(input.element.style.height).toEqual('')
   })
 
+  /*
+
+  // The height style calculations appear to not work in test environment
+  // But we do know they work in browser
+
   it('has style height when max-rows greater than rows', async () => {
     const input = mount(Textarea, {
       attachToDocument: true,
       propsData: {
         rows: 2,
-        maxRows: 5 
+        maxRows: 5
       }
     })
     expect(input.element.style).toBeDefined()
@@ -488,7 +493,7 @@ describe('form-textarea', async () => {
       propsData: {
         value: '',
         rows: 2,
-        maxRows: 10 
+        maxRows: 10
       }
     })
     expect(input.element.style).toBeDefined()
@@ -501,15 +506,16 @@ describe('form-textarea', async () => {
     expect(input.emitted('update')).toBeDefined()
     expect(input.element.style.height).not.toEqual('')
     const secondHeight = parseFloat(input.element.style.height)
-    expect(secondHeight).toBeGreaterThan(startheight)
+    expect(secondHeight).toBeGreaterThan(firstHeight)
     // Set content to one lines heigh
     input.element.value = 'one'
     input.trigger('input')
     expect(input.emitted('update').length).toEqual(2)
     expect(input.element.style.height).not.toEqual('')
     const thirdHeight = parseFloat(input.element.style.height)
-    expect(thirdHeight).toBeLessThan(startheight)
+    expect(thirdHeight).toBeLessThan(secondHeight)
   })
+  */
 
   // To be added: Formatter tests (copy from form-input.spec.js
 })

From a8f9828d4adbe9a4ade4c276a3adc56e89373444 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Sun, 28 Oct 2018 19:17:29 -0300
Subject: [PATCH 30/66] Update form-textarea.js

---
 src/components/form-textarea/form-textarea.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/form-textarea/form-textarea.js b/src/components/form-textarea/form-textarea.js
index d8e03a93644..f35f96d58b1 100644
--- a/src/components/form-textarea/form-textarea.js
+++ b/src/components/form-textarea/form-textarea.js
@@ -112,6 +112,7 @@ export default {
     computedRows () {
       return this.computedMinRows === this.computedMaxRows ? this.computedMinRows : null
     },
+    /* instanbul ignore next: style computations do not work in test environment */
     computedHeight () {
       const el = this.$el
 

From 906d9a62578361a25b932a7b94dbe963eaddfb32 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Sun, 28 Oct 2018 20:18:48 -0300
Subject: [PATCH 31/66] add formatter tests

---
 .../form-textarea/form-textarea.spec.js       | 151 +++++++++++++++++-
 1 file changed, 149 insertions(+), 2 deletions(-)

diff --git a/src/components/form-textarea/form-textarea.spec.js b/src/components/form-textarea/form-textarea.spec.js
index 2401fb73a90..214cf116f6c 100644
--- a/src/components/form-textarea/form-textarea.spec.js
+++ b/src/components/form-textarea/form-textarea.spec.js
@@ -279,7 +279,7 @@ describe('form-textarea', async () => {
     expect(input.emitted('update').length).toEqual(1)
   })
 
-  it('emits an update event with one arg on change when value changed', async () => {
+  it('emits an update event with one arg on change when input text changed', async () => {
     const input = mount(Textarea)
 
     input.element.value = 'test'
@@ -293,6 +293,19 @@ describe('form-textarea', async () => {
     expect(input.emitted('update')[1][0]).toEqual('TEST')
   })
 
+  it('emits an update event when value prop changed', async () => {
+    const input = mount(Textarea, {
+      value: ''
+    })
+
+    expect(input.emitted('update')).not.toBeDefined()
+    input.setProps({value: 'test'})
+    expect(input.emitted('update').length).toEqual(1)
+    expect(input.emitted('update')[0][0]).toEqual('test')
+    expect(input.emitted('input')).not.toBeDefined()
+    expect(input.emitted('change')).not.toBeDefined()
+  })
+
   it('emits a native focus event', async () => {
     const spy = jest.fn()
     const input = mount(Textarea, {
@@ -517,5 +530,139 @@ describe('form-textarea', async () => {
   })
   */
 
-  // To be added: Formatter tests (copy from form-input.spec.js
+  it('Formats on input when not lazy', async () => {
+    const input = mount(Textarea, {
+      attachToDocument: true,
+      propsData: {
+        value: '',
+        formatter (value) {
+          return value.toLowerCase()
+        }
+      }
+    })
+    input.element.value = 'TEST'
+    input.trigger('input')
+
+    // Input event fires first with user entered value
+    expect(input.emitted('input')).toBeDefined()
+    expect(input.emitted('input').length).toEqual(1)
+    expect(input.emitted('input')[0][0]).toEqual('TEST')
+    // Followed by an update with formatted value
+    expect(input.emitted('update')).toBeDefined()
+    expect(input.emitted('update')[0][0]).toEqual('test')
+    // And no change event
+    expect(input.emitted('change')).not.toBeDefined()
+  })
+
+  it('Formats on change when lazy', async () => {
+    const input = mount(Textarea, {
+      attachToDocument: true,
+      propsData: {
+        formatter (value) {
+          return value.toLowerCase()
+        },
+        lazyFormatter: true
+      }
+    })
+
+    input.element.value = 'TEST'
+    input.trigger('input')
+
+    // Input event fires first
+    expect(input.emitted('input')).toBeDefined()
+    expect(input.emitted('input').length).toEqual(1)
+    expect(input.emitted('input')[0][0]).toEqual('TEST')
+    // followed by an update
+    expect(input.emitted('update')).toBeDefined()
+    expect(input.emitted('update').length).toEqual(1)
+    expect(input.emitted('update')[0][0]).toEqual('TEST')
+
+    input.trigger('change')
+
+    // Update fires before change with formatted value
+    expect(input.emitted('update').length).toEqual(2)
+    expect(input.emitted('update')[1][0]).toEqual('test')
+    // Followed by change event with formatted value
+    expect(input.emitted('change')).toBeDefined()
+    expect(input.emitted('change')[0][0]).toEqual('test')
+  })
+
+  it('Formats value on mount when not lazy', async () => {
+    const input = mount(Textarea, {
+      attachToDocument: true,
+      propsData: {
+        value: 'TEST',
+        formatter (value) {
+          return value.toLowerCase()
+        }
+      }
+    })
+    expect(input.emitted('input')).not.toBeDefined()
+    expect(input.emitted('change')).not.toBeDefined()
+    // Emits update with formatted value
+    expect(input.emitted('update')).toBeDefined()
+    expect(input.emitted('update').length).toEqual(1)
+    expect(input.emitted('update')[0][0]).toEqual('test')
+    expect(input.vm.localValue).toEqual('test')
+  })
+
+  it('Does not format value on mount when lazy', async () => {
+    const input = mount(Textarea, {
+      attachToDocument: true,
+      propsData: {
+        value: 'TEST',
+        formatter (value) {
+          return value.toLowerCase()
+        },
+        laszyFormatter: true
+      }
+    })
+    expect(input.emitted('input')).not.toBeDefined()
+    expect(input.emitted('change')).not.toBeDefined()
+    expect(input.emitted('update')).not.toBeDefined()
+    expect(input.vm.localValue).toEqual('TEST')
+  })
+
+  it('Formats on value prop change when not lazy', async () => {
+    const input = mount(Textarea, {
+      attachToDocument: true,
+      propsData: {
+        value: '',
+        formatter (value) {
+          return value.toLowerCase()
+        }
+      }
+    })
+    expect(input.emitted('input')).not.toBeDefined()
+    expect(input.emitted('change')).not.toBeDefined()
+    expect(input.emitted('update')).not.toBeDefined()
+    input.setProps({ value: 'TEST' })
+    // Emits update with formatted value
+    expect(input.emitted('update')).toBeDefined()
+    expect(input.emitted('update').length).toEqual(1)
+    expect(input.emitted('update')[0][0]).toEqual('test')
+
+    expect(input.emitted('input')).not.toBeDefined()
+    expect(input.emitted('change')).not.toBeDefined()
+  })
+
+  it('Does not format on value prop change when lazy', async () => {
+    const input = mount(Textarea, {
+      attachToDocument: true,
+      propsData: {
+        value: '',
+        formatter (value) {
+          return value.toLowerCase()
+        }
+      }
+    })
+    expect(input.emitted('input')).not.toBeDefined()
+    expect(input.emitted('update')).not.toBeDefined()
+    expect(input.emitted('change')).not.toBeDefined()
+    input.setProps({ value: 'TEST' })
+    // Does not emit any events
+    expect(input.emitted('input')).not.toBeDefined()
+    expect(input.emitted('update')).not.toBeDefined()
+    expect(input.emitted('change')).not.toBeDefined()
+  })
 })

From 02229ec42e733c4a565c5f13404fa44a51f97265 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Sun, 28 Oct 2018 20:23:08 -0300
Subject: [PATCH 32/66] Update form-textarea.spec.js

---
 src/components/form-textarea/form-textarea.spec.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/form-textarea/form-textarea.spec.js b/src/components/form-textarea/form-textarea.spec.js
index 214cf116f6c..a7950349054 100644
--- a/src/components/form-textarea/form-textarea.spec.js
+++ b/src/components/form-textarea/form-textarea.spec.js
@@ -614,7 +614,7 @@ describe('form-textarea', async () => {
         formatter (value) {
           return value.toLowerCase()
         },
-        laszyFormatter: true
+        lazyFormatter: true
       }
     })
     expect(input.emitted('input')).not.toBeDefined()
@@ -653,7 +653,8 @@ describe('form-textarea', async () => {
         value: '',
         formatter (value) {
           return value.toLowerCase()
-        }
+        },
+        lazyFormatter: true
       }
     })
     expect(input.emitted('input')).not.toBeDefined()

From b6a0dad8e38e242632c7d6484a722b9200d11e9e Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Sun, 28 Oct 2018 20:31:42 -0300
Subject: [PATCH 33/66] Update form-textarea.spec.js

---
 src/components/form-textarea/form-textarea.spec.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/form-textarea/form-textarea.spec.js b/src/components/form-textarea/form-textarea.spec.js
index a7950349054..02a3cceb067 100644
--- a/src/components/form-textarea/form-textarea.spec.js
+++ b/src/components/form-textarea/form-textarea.spec.js
@@ -663,7 +663,9 @@ describe('form-textarea', async () => {
     input.setProps({ value: 'TEST' })
     // Does not emit any events
     expect(input.emitted('input')).not.toBeDefined()
-    expect(input.emitted('update')).not.toBeDefined()
     expect(input.emitted('change')).not.toBeDefined()
+    expect(input.emitted('update')).toBeDefined()
+    expect(input.emitted('update').length).toEqual(1)
+    expect(input.emitted('update')[0][0]).toEqual('TEST')
   })
 })

From 2543e56ccd192c76c60731904c29da9f38c5c491 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Sun, 28 Oct 2018 20:42:23 -0300
Subject: [PATCH 34/66] Update form-textarea.js

---
 src/components/form-textarea/form-textarea.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/form-textarea/form-textarea.js b/src/components/form-textarea/form-textarea.js
index f35f96d58b1..caa6b875564 100644
--- a/src/components/form-textarea/form-textarea.js
+++ b/src/components/form-textarea/form-textarea.js
@@ -112,8 +112,7 @@ export default {
     computedRows () {
       return this.computedMinRows === this.computedMaxRows ? this.computedMinRows : null
     },
-    /* instanbul ignore next: style computations do not work in test environment */
-    computedHeight () {
+    computedHeight () /* istanbul ignore next: can't test getComputedProperties */ {
       const el = this.$el
 
       // We compare this.localValue to null to ensure reactivity of content changes.

From dbeaa49d512ec05316b03b99106598a806f4eb85 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Sun, 28 Oct 2018 21:04:14 -0300
Subject: [PATCH 35/66] keep-alive test

---
 .../form-textarea/form-textarea.spec.js       | 32 +++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/src/components/form-textarea/form-textarea.spec.js b/src/components/form-textarea/form-textarea.spec.js
index 02a3cceb067..48213834112 100644
--- a/src/components/form-textarea/form-textarea.spec.js
+++ b/src/components/form-textarea/form-textarea.spec.js
@@ -1,6 +1,17 @@
 import Textarea from './form-textarea'
 import { mount } from '@vue/test-utils'
 
+// Component for keep-alive testing
+const Keepalive = {
+  template: '<div><keep-alive>' +
+            '<b-form-textarea ref="textarea" v-if="show" v-model="value"></b-form-textarea>' +
+            '</keep-alive></div>',
+  components: { bFormTextarea: Textarea },
+  data() {
+    return { value: '', show: true }
+  }
+}
+
 describe('form-textarea', async () => {
   it('root element is textarea', async () => {
     const input = mount(Textarea)
@@ -668,4 +679,25 @@ describe('form-textarea', async () => {
     expect(input.emitted('update').length).toEqual(1)
     expect(input.emitted('update')[0][0]).toEqual('TEST')
   })
+
+  it('activate and deactivate hooks work (keepalive)', async () => {
+    const keepalive = mount(Keepalive, {
+      attachToDocument: true
+    })
+    expect(keepalive).toBeDefined();
+
+    const textarea = keepalive.vm.$refs.textarea
+    expect (textarea).toBeDefined()
+    expect(textarea.vm.dontResize).toEqual(false)
+
+    // v-if the component out of document
+    textarea.setProps({ show: false })
+    // dontResize setting happens in a next tick, so not sure if this happens immediately or not
+    expect(textarea.vm.dontResize).toEqual(true)
+
+    // v-if the component out of document
+    textarea.setProps({ show: true })
+    // dontResize setting happens in a next tick, so not sure if this happens immediately or not
+    expect(textarea.vm.dontResize).toEqual(false)
+  })
 })

From 9612a75653b36fb71155fe0397672da4a377e482 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Sun, 28 Oct 2018 21:13:17 -0300
Subject: [PATCH 36/66] Update form-textarea.spec.js

---
 src/components/form-textarea/form-textarea.spec.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/form-textarea/form-textarea.spec.js b/src/components/form-textarea/form-textarea.spec.js
index 48213834112..b3968e03f58 100644
--- a/src/components/form-textarea/form-textarea.spec.js
+++ b/src/components/form-textarea/form-textarea.spec.js
@@ -7,7 +7,7 @@ const Keepalive = {
             '<b-form-textarea ref="textarea" v-if="show" v-model="value"></b-form-textarea>' +
             '</keep-alive></div>',
   components: { bFormTextarea: Textarea },
-  data() {
+  data () {
     return { value: '', show: true }
   }
 }
@@ -684,10 +684,10 @@ describe('form-textarea', async () => {
     const keepalive = mount(Keepalive, {
       attachToDocument: true
     })
-    expect(keepalive).toBeDefined();
+    expect(keepalive).toBeDefined()
 
-    const textarea = keepalive.vm.$refs.textarea
-    expect (textarea).toBeDefined()
+    const textarea = keepalive.find(Textarea)
+    expect(textarea).toBeDefined()
     expect(textarea.vm.dontResize).toEqual(false)
 
     // v-if the component out of document

From 1e68bfbb83685fad1bf5f1917701ab73afdf0a39 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Sun, 28 Oct 2018 23:26:58 -0300
Subject: [PATCH 37/66] Update form-textarea.spec.js

---
 src/components/form-textarea/form-textarea.spec.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/components/form-textarea/form-textarea.spec.js b/src/components/form-textarea/form-textarea.spec.js
index b3968e03f58..c2f16e20788 100644
--- a/src/components/form-textarea/form-textarea.spec.js
+++ b/src/components/form-textarea/form-textarea.spec.js
@@ -5,6 +5,7 @@ import { mount } from '@vue/test-utils'
 const Keepalive = {
   template: '<div><keep-alive>' +
             '<b-form-textarea ref="textarea" v-if="show" v-model="value"></b-form-textarea>' +
+            '<p v-else></p>' +
             '</keep-alive></div>',
   components: { bFormTextarea: Textarea },
   data () {
@@ -688,16 +689,21 @@ describe('form-textarea', async () => {
 
     const textarea = keepalive.find(Textarea)
     expect(textarea).toBeDefined()
+    expect(textarea.is(Textarea)).toBe(true)
+
+    await keepalive.vm.$nextTick()
     expect(textarea.vm.dontResize).toEqual(false)
 
     // v-if the component out of document
     textarea.setProps({ show: false })
     // dontResize setting happens in a next tick, so not sure if this happens immediately or not
+    await keepalive.vm.$nextTick()
     expect(textarea.vm.dontResize).toEqual(true)
 
     // v-if the component out of document
     textarea.setProps({ show: true })
     // dontResize setting happens in a next tick, so not sure if this happens immediately or not
+    await keepalive.vm.$nextTick()
     expect(textarea.vm.dontResize).toEqual(false)
   })
 })

From 240d4ba79cb3d71308ce190477c056d7e46133e0 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Sun, 28 Oct 2018 23:32:40 -0300
Subject: [PATCH 38/66] Update form-textarea.spec.js

---
 src/components/form-textarea/form-textarea.spec.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/form-textarea/form-textarea.spec.js b/src/components/form-textarea/form-textarea.spec.js
index c2f16e20788..a57af8b1551 100644
--- a/src/components/form-textarea/form-textarea.spec.js
+++ b/src/components/form-textarea/form-textarea.spec.js
@@ -8,9 +8,8 @@ const Keepalive = {
             '<p v-else></p>' +
             '</keep-alive></div>',
   components: { bFormTextarea: Textarea },
-  data () {
-    return { value: '', show: true }
-  }
+  props: { show: true },
+  data () { return { value: '' } }
 }
 
 describe('form-textarea', async () => {
@@ -507,6 +506,8 @@ describe('form-textarea', async () => {
         maxRows: 5
       }
     })
+    await input.vm.$nextTick()
+
     expect(input.element.style).toBeDefined()
     expect(input.element.style.height).toBeDefined()
     expect(input.element.style.height).not.toEqual('')

From f538c11ca19977c555b595647e406401c7b6ea70 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Sun, 28 Oct 2018 23:41:45 -0300
Subject: [PATCH 39/66] Update form-textarea.spec.js

---
 src/components/form-textarea/form-textarea.spec.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/form-textarea/form-textarea.spec.js b/src/components/form-textarea/form-textarea.spec.js
index a57af8b1551..7829a592f6e 100644
--- a/src/components/form-textarea/form-textarea.spec.js
+++ b/src/components/form-textarea/form-textarea.spec.js
@@ -688,9 +688,9 @@ describe('form-textarea', async () => {
     })
     expect(keepalive).toBeDefined()
 
-    const textarea = keepalive.find(Textarea)
+    const textarea = keepalive.find({ name: 'b-form-textarea' })
     expect(textarea).toBeDefined()
-    expect(textarea.is(Textarea)).toBe(true)
+    expect(textarea.is({ name: 'b-form-textarea' })).toBe(true)
 
     await keepalive.vm.$nextTick()
     expect(textarea.vm.dontResize).toEqual(false)

From dc692259409c1bada467ebe013f0ba8a72455873 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Sun, 28 Oct 2018 23:56:36 -0300
Subject: [PATCH 40/66] Update form-textarea.spec.js

---
 src/components/form-textarea/form-textarea.spec.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/form-textarea/form-textarea.spec.js b/src/components/form-textarea/form-textarea.spec.js
index 7829a592f6e..a1d87037ab6 100644
--- a/src/components/form-textarea/form-textarea.spec.js
+++ b/src/components/form-textarea/form-textarea.spec.js
@@ -495,8 +495,8 @@ describe('form-textarea', async () => {
 
   /*
 
-  // The height style calculations appear to not work in test environment
-  // But we do know they work in browser
+  // The height style calculations appear to not work in JSDOM environment
+  // But we do know auto height works in browser
 
   it('has style height when max-rows greater than rows', async () => {
     const input = mount(Textarea, {
@@ -688,9 +688,9 @@ describe('form-textarea', async () => {
     })
     expect(keepalive).toBeDefined()
 
-    const textarea = keepalive.find({ name: 'b-form-textarea' })
+    const textarea = keepalive.find({ name: 'bFormTextarea' })
     expect(textarea).toBeDefined()
-    expect(textarea.is({ name: 'b-form-textarea' })).toBe(true)
+    expect(textarea.is({ name: 'bFormTextarea' })).toBe(true)
 
     await keepalive.vm.$nextTick()
     expect(textarea.vm.dontResize).toEqual(false)

From 22973c1e037b5d01025c31bb4fc920915e1217a6 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Mon, 29 Oct 2018 00:03:37 -0300
Subject: [PATCH 41/66] Update form-textarea.spec.js

---
 src/components/form-textarea/form-textarea.spec.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/form-textarea/form-textarea.spec.js b/src/components/form-textarea/form-textarea.spec.js
index a1d87037ab6..ffeb66ef3c7 100644
--- a/src/components/form-textarea/form-textarea.spec.js
+++ b/src/components/form-textarea/form-textarea.spec.js
@@ -684,13 +684,17 @@ describe('form-textarea', async () => {
 
   it('activate and deactivate hooks work (keepalive)', async () => {
     const keepalive = mount(Keepalive, {
-      attachToDocument: true
+      attachToDocument: true,
+      propsData: {
+        show: true
+      }
     })
     expect(keepalive).toBeDefined()
 
     const textarea = keepalive.find({ name: 'bFormTextarea' })
     expect(textarea).toBeDefined()
-    expect(textarea.is({ name: 'bFormTextarea' })).toBe(true)
+    expect(textarea.isVueInstance()).toBe(true)
+    expect(textarea.name()).toBe('bFormTextarea')
 
     await keepalive.vm.$nextTick()
     expect(textarea.vm.dontResize).toEqual(false)

From e5b620d6bbfd8f5b239057a5f97a512635c47b52 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Mon, 29 Oct 2018 00:11:09 -0300
Subject: [PATCH 42/66] Update form-textarea.spec.js

---
 src/components/form-textarea/form-textarea.spec.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/form-textarea/form-textarea.spec.js b/src/components/form-textarea/form-textarea.spec.js
index ffeb66ef3c7..4812a750ce2 100644
--- a/src/components/form-textarea/form-textarea.spec.js
+++ b/src/components/form-textarea/form-textarea.spec.js
@@ -691,10 +691,9 @@ describe('form-textarea', async () => {
     })
     expect(keepalive).toBeDefined()
 
-    const textarea = keepalive.find({ name: 'bFormTextarea' })
+    const textarea = keepalive.find(Textarea)
     expect(textarea).toBeDefined()
     expect(textarea.isVueInstance()).toBe(true)
-    expect(textarea.name()).toBe('bFormTextarea')
 
     await keepalive.vm.$nextTick()
     expect(textarea.vm.dontResize).toEqual(false)

From 29e76a67008bcc29882cc9ab36e76c7528c6d9d9 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Mon, 29 Oct 2018 00:13:51 -0300
Subject: [PATCH 43/66] Update form-textarea.spec.js

---
 src/components/form-textarea/form-textarea.spec.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/form-textarea/form-textarea.spec.js b/src/components/form-textarea/form-textarea.spec.js
index 4812a750ce2..05059bc07d8 100644
--- a/src/components/form-textarea/form-textarea.spec.js
+++ b/src/components/form-textarea/form-textarea.spec.js
@@ -699,13 +699,13 @@ describe('form-textarea', async () => {
     expect(textarea.vm.dontResize).toEqual(false)
 
     // v-if the component out of document
-    textarea.setProps({ show: false })
+    keepalive.setProps({ show: false })
     // dontResize setting happens in a next tick, so not sure if this happens immediately or not
     await keepalive.vm.$nextTick()
     expect(textarea.vm.dontResize).toEqual(true)
 
     // v-if the component out of document
-    textarea.setProps({ show: true })
+    keepalive.setProps({ show: true })
     // dontResize setting happens in a next tick, so not sure if this happens immediately or not
     await keepalive.vm.$nextTick()
     expect(textarea.vm.dontResize).toEqual(false)

From eb55a922f21f761c65f92b69ef1622f3a78df6d2 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Mon, 29 Oct 2018 00:15:51 -0300
Subject: [PATCH 44/66] Update form-textarea.spec.js

---
 .../form-textarea/form-textarea.spec.js       | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/form-textarea/form-textarea.spec.js b/src/components/form-textarea/form-textarea.spec.js
index 05059bc07d8..c3bfffafdec 100644
--- a/src/components/form-textarea/form-textarea.spec.js
+++ b/src/components/form-textarea/form-textarea.spec.js
@@ -1,17 +1,6 @@
 import Textarea from './form-textarea'
 import { mount } from '@vue/test-utils'
 
-// Component for keep-alive testing
-const Keepalive = {
-  template: '<div><keep-alive>' +
-            '<b-form-textarea ref="textarea" v-if="show" v-model="value"></b-form-textarea>' +
-            '<p v-else></p>' +
-            '</keep-alive></div>',
-  components: { bFormTextarea: Textarea },
-  props: { show: true },
-  data () { return { value: '' } }
-}
-
 describe('form-textarea', async () => {
   it('root element is textarea', async () => {
     const input = mount(Textarea)
@@ -683,12 +672,23 @@ describe('form-textarea', async () => {
   })
 
   it('activate and deactivate hooks work (keepalive)', async () => {
+    const Keepalive = {
+      template: '<div><keep-alive>' +
+                '<b-form-textarea ref="textarea" v-if="show" v-model="value"></b-form-textarea>' +
+                '<p v-else></p>' +
+                '</keep-alive></div>',
+      components: { bFormTextarea: Textarea },
+      props: { show: true },
+      data () { return { value: '' } }
+    }
+
     const keepalive = mount(Keepalive, {
       attachToDocument: true,
       propsData: {
         show: true
       }
     })
+
     expect(keepalive).toBeDefined()
 
     const textarea = keepalive.find(Textarea)

From 158467e4bfe094f7e4d76fe19220591eafcb0f03 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Mon, 29 Oct 2018 00:18:50 -0300
Subject: [PATCH 45/66] Delete form-textarea.html

---
 .../form-textarea/fixtures/form-textarea.html | 22 -------------------
 1 file changed, 22 deletions(-)
 delete mode 100644 src/components/form-textarea/fixtures/form-textarea.html

diff --git a/src/components/form-textarea/fixtures/form-textarea.html b/src/components/form-textarea/fixtures/form-textarea.html
deleted file mode 100644
index bd510c2397d..00000000000
--- a/src/components/form-textarea/fixtures/form-textarea.html
+++ /dev/null
@@ -1,22 +0,0 @@
-<div id="app">
-  <!-- default -->
-  <b-form-textarea ref="default" v-model="text" placeholder="Type something">
-  </b-form-textarea>
-  <br><br>
-
-  <!-- rows and max-rows -->
-  <b-form-textarea ref="rows" :rows="4" :max-rows="10"v-model="text" placeholder="Type something">
-  </b-form-textarea>
-  <br><br>
-
-  <!-- state -->
-  <b-form-textarea ref="invalid" state="invalid" v-model="text" placeholder="Type something">
-  </b-form-textarea>
-  <br><br>
-  
-  <!-- value -->
-  <b-form-textarea ref="value" v-model="value">
-  </b-form-textarea>
-  <br><br>
- 
-</div>

From f8174d6c00622f4c57929cb468b8e6bd1414309b Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Mon, 29 Oct 2018 02:19:51 -0300
Subject: [PATCH 46/66] Update form-textarea.js

---
 src/components/form-textarea/form-textarea.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/form-textarea/form-textarea.js b/src/components/form-textarea/form-textarea.js
index caa6b875564..e785a6aebec 100644
--- a/src/components/form-textarea/form-textarea.js
+++ b/src/components/form-textarea/form-textarea.js
@@ -92,6 +92,9 @@ export default {
     // If we are in a deactivated <keep-alive>, disable opt-in resizing
     this.dontResize = true
   },
+  beforeDestroy () {
+    this.dontResize = true
+  },
   computed: {
     computedStyle () {
       return {

From 440f78764792ac7297c9d827d05a4c9a67f08e16 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Fri, 2 Nov 2018 16:02:00 -0300
Subject: [PATCH 47/66] form-text mixin: add class conditionals for
 b-form-input

in preparation for having b-form-input use this mixin
---
 src/mixins/form-text.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/mixins/form-text.js b/src/mixins/form-text.js
index b21e8170f2d..974bbb1d8a1 100644
--- a/src/mixins/form-text.js
+++ b/src/mixins/form-text.js
@@ -54,6 +54,14 @@ export default {
     computedClass () {
       return [
         this.plaintext ? 'form-control-plaintext' : 'form-control',
+        {
+          // Special class cases for b-form-input input types
+          'custom-range': this.type === 'range',
+          // plaintext not supported by type=range or type=color
+          'form-control-plaintext': this.plaintext && this.type !== 'range' && this.type !== 'color',
+          // form-control not used by type=range or plaintext. Always used by type=color
+          'form-control': (!this.plaintext && this.type !== 'range') || this.type === 'color'
+        },
         this.sizeFormClass,
         this.stateClass
       ]

From cd5262e83f998eefca5c7e0648e5b62eb169ccda Mon Sep 17 00:00:00 2001
From: Vitaly Mosin <mosinve@gmail.com>
Date: Sat, 3 Nov 2018 03:00:22 +0700
Subject: [PATCH 48/66] Typos fix

---
 src/components/form-textarea/README.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/form-textarea/README.md b/src/components/form-textarea/README.md
index d44442676f4..e85f99be22b 100644
--- a/src/components/form-textarea/README.md
+++ b/src/components/form-textarea/README.md
@@ -32,11 +32,11 @@ export default {
 ## Displayed rows
 To set the height of `<b-form-textarea>`, set the `rows` prop to the desired number of
 rows.  If no value is provided to `rows`, then it will default to `2` (the browser
-default and minimum acceptable value). Setting it to null or a value below two will
-result in the devault of `2` being used.
+default and minimum acceptable value). Setting it to null or a value below 2 will
+result in the default of `2` being used.
 
 ### Disable resize handle
-Some web browsers will allow the user to re-size the hight of the textarea.
+Some web browsers will allow the user to re-size the height of the textarea.
 To disable this feature, set the `no-resize` prop to `true`.
 
 ### Auto height
@@ -44,13 +44,13 @@ To disable this feature, set the `no-resize` prop to `true`.
 even as the user enters text.
 
 To set the initial minimum height (in rows), set the `rows` prop to the desired
-number of lines (or leave it at hte default of `2`).
+number of lines (or leave it at the default of `2`).
 
 To limit the maximum rows that the text area will grow to (before showing a scrollbar),
 set the `max-rows` prop to the maximum number of lines of text.
 
 ## Control sizing
-Set text heights using the `size` prop to `sm` or `lg` for small or large respectively.
+Set text height using the `size` prop to `sm` or `lg` for small or large respectively.
 
 To control width, place the input inside standard Bootstrap grid column.
 
@@ -166,7 +166,7 @@ export default {
 ```
 
 ## Native and custom events
-All native events (other than the cuustom `input` and `change` events) are supported, without
+All native events (other than the custom `input` and `change` events) are supported, without
 the need for the `.native` modifier.
 
 The custom `input` and `change` events receive to paramters: the input `value`, and the native

From 6947a1b5870c2ea53974b82fed8e02d457b76782 Mon Sep 17 00:00:00 2001
From: Vitaly Mosin <mosinve@gmail.com>
Date: Sat, 3 Nov 2018 03:01:01 +0700
Subject: [PATCH 49/66] Typos fix

---
 src/components/form-textarea/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/form-textarea/README.md b/src/components/form-textarea/README.md
index e85f99be22b..aec2cff5b62 100644
--- a/src/components/form-textarea/README.md
+++ b/src/components/form-textarea/README.md
@@ -40,7 +40,7 @@ Some web browsers will allow the user to re-size the height of the textarea.
 To disable this feature, set the `no-resize` prop to `true`.
 
 ### Auto height
-`<b-form-textarea>` can also automaticlly adjust its height (text rows) to fit the content,
+`<b-form-textarea>` can also automatically adjust its height (text rows) to fit the content,
 even as the user enters text.
 
 To set the initial minimum height (in rows), set the `rows` prop to the desired

From 070a9eecf1a1c2685615349d9adb68aa17c36e41 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Fri, 2 Nov 2018 18:58:01 -0300
Subject: [PATCH 50/66] deterct if IME composition in progress

---
 src/mixins/form-text.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/mixins/form-text.js b/src/mixins/form-text.js
index 974bbb1d8a1..ae3f0a0a81c 100644
--- a/src/mixins/form-text.js
+++ b/src/mixins/form-text.js
@@ -81,8 +81,7 @@ export default {
   },
   methods: {
     stringifyValue (value) {
-      // We use == so that undefined will also equal null
-      return value == null ? '' : String(value)
+      return (value === null || typeof value === 'undefined') ? '' : String(value)
     },
     getFormatted (value, event = null) {
       value = this.stringifyValue(value)
@@ -97,6 +96,9 @@ export default {
       }
     },
     onInput (evt) {
+      // evt.target.composing is set by Vue
+      // https://github.com/vuejs/vue/blob/dev/src/platforms/web/runtime/directives/model.js
+      if (evt.target.composing) return
       this.$emit('input', evt.target.value, evt)
       if (evt.defaultPrevented) return
       const value = evt.target.value

From a418d984023624fa533876b970b443ba207db54a Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Tue, 20 Nov 2018 20:06:09 -0400
Subject: [PATCH 51/66] emulate .number and .trim modifiers, reorder events,
 lazy format on on blur event

this will most li key cause the test to fail, as they will need updating
---
 src/mixins/form-text.js | 76 ++++++++++++++++++++++++++++++++++-------
 1 file changed, 63 insertions(+), 13 deletions(-)

diff --git a/src/mixins/form-text.js b/src/mixins/form-text.js
index ae3f0a0a81c..14def703499 100644
--- a/src/mixins/form-text.js
+++ b/src/mixins/form-text.js
@@ -28,6 +28,14 @@ export default {
       type: Function,
       value: null
     },
+    trim: {
+      type: Boolean,
+      default: false
+    },
+    number: {
+      type: Boolean,
+      default: false
+    },
     lazyFormatter: {
       type: Boolean,
       value: false
@@ -44,11 +52,16 @@ export default {
   },
   watch: {
     value (newVal, oldVal) {
-      this.setValue(this.lazyFormatter ? newVal : this.getFormatted(newVal, null))
+      if (newVal !== oldVal && newVal !== this.localValue) {
+        this.localValue = this.stringifyValue(newVal)
+      }
     }
   },
   mounted () {
-    this.setValue(this.lazyFormatter ? this.value : this.getFormatted(this.value, null))
+    const value = this.stringifyValue(this.value)
+    if (value !== this.localValue) {
+      this.localValue = value
+    }
   },
   computed: {
     computedClass () {
@@ -83,30 +96,67 @@ export default {
     stringifyValue (value) {
       return (value === null || typeof value === 'undefined') ? '' : String(value)
     },
-    getFormatted (value, event = null) {
+    getFormatted (value, event, force = false) {
       value = this.stringifyValue(value)
-      return this.formatter ? this.formatter(value, event) : value
+      if ((!this.lazyFormatter || force) && typeof this.formatter === 'function') {
+        value = this.formatter(value, event)
+      }
+      return value
     },
-    setValue (value) {
+    updateValue (value) {
       value = this.stringifyValue(value)
       if (this.localValue !== value) {
-        // Update the v-model only if value has changed
+        // keep the input set to the value before modifiers
         this.localValue = value
+        if (this.number) {
+          // Emulate .number modifier behaviour
+          const num = parseFloat(value)
+          value = num === NaN ? value : num
+        } else if (this.trim) {
+          // Emulate .trim modifier behaviour
+          value = value.trim()
+        }
+        // Update the v-model
         this.$emit('update', value)
       }
     },
     onInput (evt) {
       // evt.target.composing is set by Vue
       // https://github.com/vuejs/vue/blob/dev/src/platforms/web/runtime/directives/model.js
-      if (evt.target.composing) return
-      this.$emit('input', evt.target.value, evt)
-      if (evt.defaultPrevented) return
-      const value = evt.target.value
-      this.setValue(this.lazyFormatter ? value : this.getFormatted(value, evt))
+      if (evt.target.composing) {
+        return
+      }
+      const formatted = this.getFormatted(evt.target.value, evt)
+      if (formatted === false || evt.defaultPrevented) {
+        return
+      }
+      this.updateValue(formatted)
+      this.$emit('input', formatted)
     },
     onChange (evt) {
-      this.setValue(this.getFormatted(evt.target.value, evt))
-      this.$emit('change', this.localValue, evt)
+      // evt.target.composing is set by Vue
+      // https://github.com/vuejs/vue/blob/dev/src/platforms/web/runtime/directives/model.js
+      if (evt.target.composing) {
+        return
+      }
+      const formatted = this.getFormatted(evt.target.value, evt)
+      if (formatted === false) {
+        return
+      }
+      this.updateValue(formatted)
+      this.$emit('change', formatted)
+    },
+    onBlur (evt) {
+      // lazy formatter
+      if (this.lazyFormatter) {
+        const formatted = this.getFormatted(evt.target.value, evt, true)
+        if (formatted === false) {
+          return
+        }
+        this.updateValue(formatted)
+      }
+      // Emit native blur event
+      this.emit('blur', evt)
     },
     focus () {
       // For external handler that may want a focus method

From a06c105d752ee38b84bb001c4585a85724587a6a Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Tue, 20 Nov 2018 20:15:43 -0400
Subject: [PATCH 52/66] add blur listener to textarea

---
 src/components/form-textarea/form-textarea.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/form-textarea/form-textarea.js b/src/components/form-textarea/form-textarea.js
index 87f65fd0f2f..c02615503fc 100644
--- a/src/components/form-textarea/form-textarea.js
+++ b/src/components/form-textarea/form-textarea.js
@@ -18,7 +18,7 @@ export default {
     formValidityMixin
   ],
   render (h) {
-    // using self instead of this helps reduce code size during minification
+    // Using self instead of this helps reduce code size during minification
     const self = this
     return h('textarea', {
       ref: 'input',
@@ -52,7 +52,8 @@ export default {
       on: {
         ...self.$listeners,
         input: self.onInput,
-        change: self.onChange
+        change: self.onChange,
+        blur: self.onBlur
       }
     })
   },
@@ -119,6 +120,9 @@ export default {
     computedHeight () /* istanbul ignore next: can't test getComputedProperties */ {
       const el = this.$el
 
+      if (this.isServer) {
+        return null
+      }
       // We compare this.localValue to null to ensure reactivity of content changes.
       if (this.localValue === null || this.computedRows || this.dontResize || this.$isServer) {
         return null

From a52d1551848cd45a1b183a6fc8db46a5831225e6 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Tue, 20 Nov 2018 20:20:14 -0400
Subject: [PATCH 53/66] Update form-text.js

---
 src/mixins/form-text.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/mixins/form-text.js b/src/mixins/form-text.js
index 14def703499..1885fe2c033 100644
--- a/src/mixins/form-text.js
+++ b/src/mixins/form-text.js
@@ -111,7 +111,7 @@ export default {
         if (this.number) {
           // Emulate .number modifier behaviour
           const num = parseFloat(value)
-          value = num === NaN ? value : num
+          value = isNaN(num) ? value : num
         } else if (this.trim) {
           // Emulate .trim modifier behaviour
           value = value.trim()

From 11f26b0fe399c7710c329a10316872872d76963c Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Tue, 20 Nov 2018 20:25:56 -0400
Subject: [PATCH 54/66] Update form-text.js

---
 src/mixins/form-text.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/mixins/form-text.js b/src/mixins/form-text.js
index 1885fe2c033..d7e1437c5a8 100644
--- a/src/mixins/form-text.js
+++ b/src/mixins/form-text.js
@@ -156,7 +156,7 @@ export default {
         this.updateValue(formatted)
       }
       // Emit native blur event
-      this.emit('blur', evt)
+      this.$emit('blur', evt)
     },
     focus () {
       // For external handler that may want a focus method

From d96d2b94f8ccb260f8166c66fbe0c590df446f01 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Tue, 20 Nov 2018 21:40:23 -0400
Subject: [PATCH 55/66] Update form-textarea.spec.js

---
 .../form-textarea/form-textarea.spec.js       | 144 ++++++++++--------
 1 file changed, 80 insertions(+), 64 deletions(-)

diff --git a/src/components/form-textarea/form-textarea.spec.js b/src/components/form-textarea/form-textarea.spec.js
index c3bfffafdec..d96cd3efd73 100644
--- a/src/components/form-textarea/form-textarea.spec.js
+++ b/src/components/form-textarea/form-textarea.spec.js
@@ -219,42 +219,41 @@ describe('form-textarea', async () => {
     expect(input.attributes('aria-invalid')).toBe('spelling')
   })
 
-  it('emits an input event with args value and event', async () => {
+  it('does not emit an update event on mount when value not set', async () => {
+    const input = mount(Textarea)
+    expect(input.emitted('update')).not.toBeDefined()
+  })
+
+  it('does mot emit an update event on mount when value is set and no formatter', async () => {
+    const input = mount(Textarea, {
+      value: 'foobar'
+    })
+    expect(input.emitted('update')).not.toBeDefined()
+  })
+
+  it('emits an input event with single arg of value', async () => {
     const input = mount(Textarea)
 
     input.element.value = 'test'
     input.trigger('input')
 
     expect(input.emitted('input')).toBeDefined()
+    expect(input.emitted('input')[0].length).toEqual(1)
     expect(input.emitted('input')[0][0]).toEqual('test')
-    expect(input.emitted('input')[0].length).toEqual(2)
-    expect(input.emitted('input')[0][1].type).toEqual('input')
   })
 
-  it('emits an change event args value and event', async () => {
+  it('emits an change event with single arg of value', async () => {
     const input = mount(Textarea)
 
     input.element.value = 'test'
+    // Need to trigger an input event before change can be emitted
     input.trigger('input')
     expect(input.emitted('change')).not.toBeDefined()
 
     input.trigger('change')
     expect(input.emitted('change')).toBeDefined()
+    expect(input.emitted('change')[0].length).toEqual(1)
     expect(input.emitted('change')[0][0]).toEqual('test')
-    expect(input.emitted('change')[0].length).toEqual(2)
-    expect(input.emitted('change')[0][1].type).toEqual('change')
-  })
-
-  it('does not emit an update event on mount when value not set', async () => {
-    const input = mount(Textarea)
-    expect(input.emitted('update')).not.toBeDefined()
-  })
-
-  it('does mot emit an update event on mount when value is set and no formatter', async () => {
-    const input = mount(Textarea, {
-      value: 'foobar'
-    })
-    expect(input.emitted('update')).not.toBeDefined()
   })
 
   it('emits an update event with one arg on input', async () => {
@@ -293,15 +292,16 @@ describe('form-textarea', async () => {
     expect(input.emitted('update')[1][0]).toEqual('TEST')
   })
 
-  it('emits an update event when value prop changed', async () => {
+  it('does not emit an update, input or change event when value prop changed', async () => {
     const input = mount(Textarea, {
       value: ''
     })
 
     expect(input.emitted('update')).not.toBeDefined()
+    expect(input.emitted('input')).not.toBeDefined()
+    expect(input.emitted('change')).not.toBeDefined()
     input.setProps({value: 'test'})
-    expect(input.emitted('update').length).toEqual(1)
-    expect(input.emitted('update')[0][0]).toEqual('test')
+    expect(input.emitted('update')).not.toBeDefined()
     expect(input.emitted('input')).not.toBeDefined()
     expect(input.emitted('change')).not.toBeDefined()
   })
@@ -318,16 +318,10 @@ describe('form-textarea', async () => {
     expect(spy).toHaveBeenCalled()
   })
 
-  it('emits a native blur event', async () => {
-    const spy = jest.fn()
-    const input = mount(Textarea, {
-      listeners: {
-        blur: spy
-      }
-    })
+  it('emits a blur event when blurred', async () => {
+    const input = mount(Textarea)
     input.trigger('blur')
-    expect(input.emitted('blur')).not.toBeDefined()
-    expect(spy).toHaveBeenCalled()
+    expect(input.emitted('blur')).toBeDefined()
   })
 
   it('has attribute rows set to 2 by default', async () => {
@@ -484,8 +478,8 @@ describe('form-textarea', async () => {
 
   /*
 
-  // The height style calculations appear to not work in JSDOM environment
-  // But we do know auto height works in browser
+  // The height style calculations do not work in JSDOM environment
+  // But we do know auto height works in browser from manual testing
 
   it('has style height when max-rows greater than rows', async () => {
     const input = mount(Textarea, {
@@ -545,18 +539,44 @@ describe('form-textarea', async () => {
     input.element.value = 'TEST'
     input.trigger('input')
 
-    // Input event fires first with user entered value
+    // Update event fires first with formatted value
+    expect(input.emitted('update')).toBeDefined()
+    expect(input.emitted('update').length).toEqual(1)
+    expect(input.emitted('update')[0][0]).toEqual('TEST')
+    // Followed by an input event with formatted value
     expect(input.emitted('input')).toBeDefined()
     expect(input.emitted('input').length).toEqual(1)
     expect(input.emitted('input')[0][0]).toEqual('TEST')
-    // Followed by an update with formatted value
-    expect(input.emitted('update')).toBeDefined()
-    expect(input.emitted('update')[0][0]).toEqual('test')
     // And no change event
     expect(input.emitted('change')).not.toBeDefined()
   })
 
-  it('Formats on change when lazy', async () => {
+  it('Formats on change when not lazy', async () => {
+    const input = mount(Textarea, {
+      attachToDocument: true,
+      propsData: {
+        value: '',
+        formatter (value) {
+          return value.toLowerCase()
+        }
+      }
+    })
+    input.element.value = 'TEST'
+    input.trigger('change')
+
+    // Update event fires first with formatted value
+    expect(input.emitted('update')).toBeDefined()
+    expect(input.emitted('update').length).toEqual(1)
+    expect(input.emitted('update')[0][0]).toEqual('TEST')
+    // Followed by a change event with formatted value
+    expect(input.emitted('change')).toBeDefined()
+    expect(input.emitted('change').length).toEqual(1)
+    expect(input.emitted('change')[0][0]).toEqual('TEST')
+    // And no input event
+    expect(input.emitted('input')).not.toBeDefined()
+  })
+
+  it('Formats on blur when lazy', async () => {
     const input = mount(Textarea, {
       attachToDocument: true,
       propsData: {
@@ -570,26 +590,26 @@ describe('form-textarea', async () => {
     input.element.value = 'TEST'
     input.trigger('input')
 
-    // Input event fires first
-    expect(input.emitted('input')).toBeDefined()
-    expect(input.emitted('input').length).toEqual(1)
-    expect(input.emitted('input')[0][0]).toEqual('TEST')
-    // followed by an update
+    // Update event fires first
     expect(input.emitted('update')).toBeDefined()
     expect(input.emitted('update').length).toEqual(1)
     expect(input.emitted('update')[0][0]).toEqual('TEST')
+    // followed by an input
+    expect(input.emitted('input')).toBeDefined()
+    expect(input.emitted('input').length).toEqual(1)
+    expect(input.emitted('input')[0][0]).toEqual('TEST')
 
-    input.trigger('change')
+    input.trigger('blur')
 
     // Update fires before change with formatted value
     expect(input.emitted('update').length).toEqual(2)
     expect(input.emitted('update')[1][0]).toEqual('test')
-    // Followed by change event with formatted value
+    // Followed by blur event with native event
     expect(input.emitted('change')).toBeDefined()
-    expect(input.emitted('change')[0][0]).toEqual('test')
+    expect(input.emitted('change')[0][0] instanceof Event).toBe(true)
   })
 
-  it('Formats value on mount when not lazy', async () => {
+  it('Does not format value on mount when not lazy', async () => {
     const input = mount(Textarea, {
       attachToDocument: true,
       propsData: {
@@ -601,11 +621,8 @@ describe('form-textarea', async () => {
     })
     expect(input.emitted('input')).not.toBeDefined()
     expect(input.emitted('change')).not.toBeDefined()
-    // Emits update with formatted value
-    expect(input.emitted('update')).toBeDefined()
-    expect(input.emitted('update').length).toEqual(1)
-    expect(input.emitted('update')[0][0]).toEqual('test')
-    expect(input.vm.localValue).toEqual('test')
+    expect(input.emitted('update')).not.toBeDefined()
+    expect(input.vm.localValue).toEqual('TEST')
   })
 
   it('Does not format value on mount when lazy', async () => {
@@ -625,7 +642,7 @@ describe('form-textarea', async () => {
     expect(input.vm.localValue).toEqual('TEST')
   })
 
-  it('Formats on value prop change when not lazy', async () => {
+  it('Does not format on prop "value" change when not lazy', async () => {
     const input = mount(Textarea, {
       attachToDocument: true,
       propsData: {
@@ -635,17 +652,15 @@ describe('form-textarea', async () => {
         }
       }
     })
+    expect(input.emitted('update')).not.toBeDefined()
     expect(input.emitted('input')).not.toBeDefined()
     expect(input.emitted('change')).not.toBeDefined()
-    expect(input.emitted('update')).not.toBeDefined()
+    expect(input.vm.localValue).toEqual('')
     input.setProps({ value: 'TEST' })
-    // Emits update with formatted value
-    expect(input.emitted('update')).toBeDefined()
-    expect(input.emitted('update').length).toEqual(1)
-    expect(input.emitted('update')[0][0]).toEqual('test')
-
+    expect(input.emitted('update')).not.toBeDefined()
     expect(input.emitted('input')).not.toBeDefined()
     expect(input.emitted('change')).not.toBeDefined()
+    expect(input.vm.localValue).toEqual('TEST')
   })
 
   it('Does not format on value prop change when lazy', async () => {
@@ -659,16 +674,16 @@ describe('form-textarea', async () => {
         lazyFormatter: true
       }
     })
-    expect(input.emitted('input')).not.toBeDefined()
     expect(input.emitted('update')).not.toBeDefined()
+    expect(input.emitted('input')).not.toBeDefined()
     expect(input.emitted('change')).not.toBeDefined()
+    expect(input.vm.localValue).toEqual('')
     input.setProps({ value: 'TEST' })
     // Does not emit any events
+    expect(input.emitted('update')).not.toBeDefined()
     expect(input.emitted('input')).not.toBeDefined()
     expect(input.emitted('change')).not.toBeDefined()
-    expect(input.emitted('update')).toBeDefined()
-    expect(input.emitted('update').length).toEqual(1)
-    expect(input.emitted('update')[0][0]).toEqual('TEST')
+    expect(input.vm.localValue).toEqual('TEST')
   })
 
   it('activate and deactivate hooks work (keepalive)', async () => {
@@ -695,18 +710,19 @@ describe('form-textarea', async () => {
     expect(textarea).toBeDefined()
     expect(textarea.isVueInstance()).toBe(true)
 
+    // Check that the internal dontResize flag is now false
     await keepalive.vm.$nextTick()
     expect(textarea.vm.dontResize).toEqual(false)
 
     // v-if the component out of document
     keepalive.setProps({ show: false })
-    // dontResize setting happens in a next tick, so not sure if this happens immediately or not
+    // Check that the internal dontResize flag is now true
     await keepalive.vm.$nextTick()
     expect(textarea.vm.dontResize).toEqual(true)
 
     // v-if the component out of document
     keepalive.setProps({ show: true })
-    // dontResize setting happens in a next tick, so not sure if this happens immediately or not
+    // Check that the internal dontResize flag is now false
     await keepalive.vm.$nextTick()
     expect(textarea.vm.dontResize).toEqual(false)
   })

From bc7531a891214172ee91b51643d4c3c2be69e602 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Tue, 20 Nov 2018 21:53:09 -0400
Subject: [PATCH 56/66] Update form-textarea.spec.js

---
 .../form-textarea/form-textarea.spec.js       | 32 +++++++++++++++----
 1 file changed, 26 insertions(+), 6 deletions(-)

diff --git a/src/components/form-textarea/form-textarea.spec.js b/src/components/form-textarea/form-textarea.spec.js
index d96cd3efd73..eb7544101d4 100644
--- a/src/components/form-textarea/form-textarea.spec.js
+++ b/src/components/form-textarea/form-textarea.spec.js
@@ -542,11 +542,11 @@ describe('form-textarea', async () => {
     // Update event fires first with formatted value
     expect(input.emitted('update')).toBeDefined()
     expect(input.emitted('update').length).toEqual(1)
-    expect(input.emitted('update')[0][0]).toEqual('TEST')
+    expect(input.emitted('update')[0][0]).toEqual('test')
     // Followed by an input event with formatted value
     expect(input.emitted('input')).toBeDefined()
     expect(input.emitted('input').length).toEqual(1)
-    expect(input.emitted('input')[0][0]).toEqual('TEST')
+    expect(input.emitted('input')[0][0]).toEqual('test')
     // And no change event
     expect(input.emitted('change')).not.toBeDefined()
   })
@@ -567,11 +567,11 @@ describe('form-textarea', async () => {
     // Update event fires first with formatted value
     expect(input.emitted('update')).toBeDefined()
     expect(input.emitted('update').length).toEqual(1)
-    expect(input.emitted('update')[0][0]).toEqual('TEST')
+    expect(input.emitted('update')[0][0]).toEqual('test')
     // Followed by a change event with formatted value
     expect(input.emitted('change')).toBeDefined()
     expect(input.emitted('change').length).toEqual(1)
-    expect(input.emitted('change')[0][0]).toEqual('TEST')
+    expect(input.emitted('change')[0][0]).toEqual('test')
     // And no input event
     expect(input.emitted('input')).not.toBeDefined()
   })
@@ -598,15 +598,35 @@ describe('form-textarea', async () => {
     expect(input.emitted('input')).toBeDefined()
     expect(input.emitted('input').length).toEqual(1)
     expect(input.emitted('input')[0][0]).toEqual('TEST')
+    expect(input.vm.localValue).toEqual('TEST')
+
+    input.trigger('change')
+    // Update does not fire again
+    expect(input.emitted('update')).toBeDefined()
+    expect(input.emitted('update').length).toEqual(1)
+    expect(input.emitted('update')[0][0]).toEqual('TEST')
+    // Event change emitted
+    expect(input.emitted('change')).toBeDefined()
+    expect(input.emitted('change').length).toEqual(1)
+    expect(input.emitted('change')[0][0]).toEqual('TEST')
+    expect(input.vm.localValue).toEqual('TEST')
 
     input.trigger('blur')
 
     // Update fires before change with formatted value
+    expect(input.emitted('update')).toBeDefined()
     expect(input.emitted('update').length).toEqual(2)
     expect(input.emitted('update')[1][0]).toEqual('test')
     // Followed by blur event with native event
-    expect(input.emitted('change')).toBeDefined()
-    expect(input.emitted('change')[0][0] instanceof Event).toBe(true)
+    expect(input.emitted('blur')).toBeDefined()
+    expect(input.emitted('blur')[0][0] instanceof Event).toBe(true)
+    expect(input.emitted('blur')[0][0].type).toEqual('blur')
+    
+    // Expected number of events from above sequence
+    expect(input.emitted('input').length).toEqual(1)
+    expect(input.emitted('change').length).toEqual(1)
+    expect(input.emitted('blur').length).toEqual(1)
+    expect(input.emitted('update').length).toEqual(2)
   })
 
   it('Does not format value on mount when not lazy', async () => {

From 52dbdf14b875c16f41eeb96c718757f5bfe3a0a0 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Tue, 20 Nov 2018 22:05:40 -0400
Subject: [PATCH 57/66] tests lint

---
 src/components/form-textarea/form-textarea.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/form-textarea/form-textarea.spec.js b/src/components/form-textarea/form-textarea.spec.js
index eb7544101d4..2cb970752d5 100644
--- a/src/components/form-textarea/form-textarea.spec.js
+++ b/src/components/form-textarea/form-textarea.spec.js
@@ -621,7 +621,7 @@ describe('form-textarea', async () => {
     expect(input.emitted('blur')).toBeDefined()
     expect(input.emitted('blur')[0][0] instanceof Event).toBe(true)
     expect(input.emitted('blur')[0][0].type).toEqual('blur')
-    
+
     // Expected number of events from above sequence
     expect(input.emitted('input').length).toEqual(1)
     expect(input.emitted('change').length).toEqual(1)

From a6ffdd3ca6498ed754ce7271971b070bae241153 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Tue, 20 Nov 2018 22:18:02 -0400
Subject: [PATCH 58/66] Update package.json

---
 src/components/form-textarea/package.json | 26 ++++++++++++-----------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/components/form-textarea/package.json b/src/components/form-textarea/package.json
index 20144f67fcb..57390c216f2 100644
--- a/src/components/form-textarea/package.json
+++ b/src/components/form-textarea/package.json
@@ -8,15 +8,11 @@
     "events": [
       {
         "event": "input",
-        "description": "Input event triggered by user interaction. Emitted before any formatting and before the v-model is updated. Cancelable.",
+        "description": "Input event triggered by user interaction. Emitted after any formatting and after the v-model is updated",
         "args": [
           {
             "arg": "value",
-            "description": "Current value of input"
-          },
-          {
-            "arg": "event",
-            "description": "Native input event object"
+            "description": "Current value of textarea"
           }
         ]
       },
@@ -26,11 +22,7 @@
         "args": [
           {
             "arg": "value",
-            "description": "the value of the input"
-          },
-          {
-            "arg": "event",
-            "description": "Native change event object"
+            "description": "Current value of the textarea"
           }
         ]
       },
@@ -40,7 +32,17 @@
         "args": [
           {
             "arg": "value",
-            "description": "Value of input, after any formatting"
+            "description": "Value of textarea, after any formatting. Not emitted if the value does nto change"
+          }
+        ]
+      },
+      {
+        "event": "blur",
+        "description": "Emitted after the textarea looses focus",
+        "args": [
+          {
+            "arg": "event",
+            "description": "Native blur event (before any formmating)"
           }
         ]
       }

From ddb190e8779a9c6686927b1af67399298a3176a8 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Tue, 20 Nov 2018 22:46:10 -0400
Subject: [PATCH 59/66] Update README.md

---
 src/components/form-textarea/README.md | 86 ++++++++++++++------------
 1 file changed, 48 insertions(+), 38 deletions(-)

diff --git a/src/components/form-textarea/README.md b/src/components/form-textarea/README.md
index 45f6a5bb46f..9029269bfc9 100644
--- a/src/components/form-textarea/README.md
+++ b/src/components/form-textarea/README.md
@@ -29,26 +29,6 @@ export default {
 <!-- form-textarea-1.vue -->
 ```
 
-## Displayed rows
-To set the height of `<b-form-textarea>`, set the `rows` prop to the desired number of
-rows.  If no value is provided to `rows`, then it will default to `2` (the browser
-default and minimum acceptable value). Setting it to null or a value below 2 will
-result in the default of `2` being used.
-
-### Disable resize handle
-Some web browsers will allow the user to re-size the height of the textarea.
-To disable this feature, set the `no-resize` prop to `true`.
-
-### Auto height
-`<b-form-textarea>` can also automatically adjust its height (text rows) to fit the content,
-even as the user enters text.
-
-To set the initial minimum height (in rows), set the `rows` prop to the desired
-number of lines (or leave it at the default of `2`).
-
-To limit the maximum rows that the text area will grow to (before showing a scrollbar),
-set the `max-rows` prop to the maximum number of lines of text.
-
 ## Control sizing
 Set text height using the `size` prop to `sm` or `lg` for small or large respectively.
 
@@ -79,6 +59,27 @@ To control width, place the input inside standard Bootstrap grid column.
 <!-- form-textarea-size-1.vue -->
 ```
 
+
+## Displayed rows
+To set the height of `<b-form-textarea>`, set the `rows` prop to the desired number of
+rows.  If no value is provided to `rows`, then it will default to `2` (the browser
+default and minimum acceptable value). Setting it to null or a value below 2 will
+result in the default of `2` being used.
+
+### Disable resize handle
+Some web browsers will allow the user to re-size the height of the textarea.
+To disable this feature, set the `no-resize` prop to `true`.
+
+### Auto height
+`<b-form-textarea>` can also automatically adjust its height (text rows) to fit the content,
+even as the user enters text.
+
+To set the initial minimum height (in rows), set the `rows` prop to the desired
+number of lines (or leave it at the default of `2`).
+
+To limit the maximum rows that the text area will grow to (before showing a scrollbar),
+set the `max-rows` prop to the maximum number of lines of text.
+
 ## Textarea contextual states
 Bootstrap includes validation styles for `valid` and `invalid` states on most form controls.
 
@@ -88,16 +89,16 @@ Generally speaking, you’ll want to use a particular state for specific types o
 - `null` Displays no validation state
 
 To apply one of the contextual state icons on `<b-form-textarea>`, set the `state` prop to:
-- `'invalid'` or `false` to apply invalid styling)
-- `'valid'` or `true` to apply valid highlighting,
+- The string `'invalid'` or Boolean `false` to apply invalid styling
+- The string `'valid'` or Boolean `true` to apply valid styling
 - `null` for no validation contextual state
 
 ```html
 <template>
   <b-form-textarea id="textarea2"
-                   state="invalid"
+                   :state="text.length >= 10"
                    v-model.trim="text"
-                   placeholder="Enter something"
+                   placeholder="Enter at least 10 characters"
                    :rows="3"></b-form-textarea>
 </template>
 
@@ -144,8 +145,9 @@ optional formatter feature.
 
 ## Readonly plain text
 If you want to have `<b-form-textarea readonly>` elements in your form styled as plain
-text, set the `plaintext` prop (no need to set `readonly`) to remove the default form
-field styling and preserve the correct margin and padding and height.
+text, set the `plaintext` prop (no need to set `readonly` as it will be set
+automatically) to remove the default form field styling and preserve the correct
+text size, margin, padding and height.
 
 ```html
 <template>
@@ -165,22 +167,30 @@ export default {
 <!-- form-textarea-plaintext.vue -->
 ```
 
+## V-model modifiers
+Vue does not officially support `.lazy`, `.trim`, and `.number` modifiers on the `v-model` of
+custom component based inputs, and may generate a bad user experience. Avoid using Vue's native modifiers.
+
+To get around this, `<b-for-textarea>` and `<b-form-input>` have two boolean props `trim` and `number`
+which emulate the native Vue `v-model` modifiers `.trim` and `.number` respectivley. Emulation of the
+`.lazy` modifier is _not_ supported (listen for `change` event instead).
+
+The `.number` modifer uses `parseFloat` on the input value and will return a value of type `Number` if
+the value can be parsed as a number (via `parseFloat`), otherwise the original input value is
+returned as type `String`. This is the same behaviour as the native `.number` modifier.
+
+The `number` prop takes precedence over the `trim` prop.
+
+
 ## Native and custom events
 All native events (other than the custom `input` and `change` events) are supported, without
 the need for the `.native` modifier.
 
-The custom `input` and `change` events receive to paramters: the input `value`, and the native
-event `object`. The custom `update` event is passed the input value.
-
-The `input` event is emitted based on user interaction, before any formatting, and before
-the `v-model` is updated. You can cancel the input event by callling `preventDefault()` on
-the passed event object.
-
-The `update` event is emitted when updating the `v-model`, and will include any formatting that has
-been applied. 
+The custom `input` and `change` events receive a single argument of the current `value` (after any
+formatting has been applied), and are triggerd by user interaction.
 
-The `change` event is emitted based on user interaction (typically on blur, but also may fire
-on composition events depending on the browser). The value passed will include any applied formatting.
+The custom `update` event is passed the input value, and is emitted wehenever the v-model needs
+updating (it is emitted before `input`, `change`. and `blur` as needed).
 
 You can always access the native `input` and `change` events by using the `.native` modifier.
 
@@ -222,4 +232,4 @@ input type.
 ## Component alias
 You can use `<b-form-textarea>` by it's shorter alias `<b-textarea>`.
 
-!-- Component reference added automatically from component package.json -->
+<!-- Component reference added automatically from component package.json -->

From a68339e176d89338d2db2471fc185eebd3744929 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Tue, 20 Nov 2018 22:47:04 -0400
Subject: [PATCH 60/66] Update README.md

---
 src/components/form-textarea/README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/form-textarea/README.md b/src/components/form-textarea/README.md
index 9029269bfc9..37022d54cf0 100644
--- a/src/components/form-textarea/README.md
+++ b/src/components/form-textarea/README.md
@@ -232,4 +232,5 @@ input type.
 ## Component alias
 You can use `<b-form-textarea>` by it's shorter alias `<b-textarea>`.
 
+
 <!-- Component reference added automatically from component package.json -->

From a3e17bd876a071cdb29347ff57c9c26bb862e7e3 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Tue, 20 Nov 2018 23:25:48 -0400
Subject: [PATCH 61/66] add trim and number modifier tests

---
 .../form-textarea/form-textarea.spec.js       | 127 ++++++++++++++++++
 1 file changed, 127 insertions(+)

diff --git a/src/components/form-textarea/form-textarea.spec.js b/src/components/form-textarea/form-textarea.spec.js
index 2cb970752d5..f036ccb5e45 100644
--- a/src/components/form-textarea/form-textarea.spec.js
+++ b/src/components/form-textarea/form-textarea.spec.js
@@ -746,4 +746,131 @@ describe('form-textarea', async () => {
     await keepalive.vm.$nextTick()
     expect(textarea.vm.dontResize).toEqual(false)
   })
+
+  it('trim modifier prop works', async () => {
+    const input = mount(Textarea, {
+      attachToDocument: true,
+      propsData: {
+        value: '',
+        trim: true
+      }
+    })
+    expect(input.vm.localValue).toEqual('')
+
+    input.element.value = 'TEST'
+    input.trigger('input')
+
+    expect(input.vm.localValue).toEqual('TEST')
+    expect(input.emitted('update')).toBeDefined()
+    expect(input.emitted('update').length).toEqual(1)
+    expect(input.emitted('update')[0][0]).toEqual('TEST')
+    expect(input.emitted('input')).toBeDefined()
+    expect(input.emitted('input').length).toEqual(1)
+    expect(input.emitted('input')[0][0]).toEqual('TEST')
+
+    input.element.value = 'TEST  '
+    input.trigger('input')
+
+    expect(input.vm.localValue).toEqual('TEST  ')
+    expect(input.emitted('update')).toBeDefined()
+    expect(input.emitted('update').length).toEqual(2)
+    expect(input.emitted('update')[1][0]).toEqual('TEST')
+    expect(input.emitted('input')).toBeDefined()
+    expect(input.emitted('input').length).toEqual(2)
+    expect(input.emitted('input')[1][0]).toEqual('TEST  ')
+
+    input.element.value = '  TEST  '
+    input.trigger('input')
+
+    expect(input.vm.localValue).toEqual('  TEST  ')
+    expect(input.emitted('update')).toBeDefined()
+    expect(input.emitted('update').length).toEqual(3)
+    expect(input.emitted('update')[2][0]).toEqual('TEST')
+    expect(input.emitted('input')).toBeDefined()
+    expect(input.emitted('input').length).toEqual(3)
+    expect(input.emitted('input')[2][0]).toEqual('  TEST  ')
+
+    input.trigger('input')
+
+    expect(input.vm.localValue).toEqual('  TEST  ')
+    expect(input.emitted('update')).toBeDefined()
+    expect(input.emitted('update').length).toEqual(4)
+    expect(input.emitted('update')[3][0]).toEqual('TEST')
+    expect(input.emitted('input')).toBeDefined()
+    expect(input.emitted('input').length).toEqual(4)
+    expect(input.emitted('input')[3][0]).toEqual('  TEST  ')
+
+    input.trigger('change')
+
+    expect(input.vm.localValue).toEqual('  TEST  ')
+    expect(input.emitted('update')).toBeDefined()
+    expect(input.emitted('update').length).toEqual(4)
+    expect(input.emitted('update')[3][0]).toEqual('TEST')
+    expect(input.emitted('change')).toBeDefined()
+    expect(input.emitted('change').length).toEqual(1)
+    expect(input.emitted('change')[3][0]).toEqual('  TEST  ')
+  })
+
+  it('number modifier prop works', async () => {
+    const input = mount(Textarea, {
+      attachToDocument: true,
+      propsData: {
+        value: '',
+        number
+      }
+    })
+    expect(input.vm.localValue).toEqual('')
+
+    input.element.value = 'TEST'
+    input.trigger('input')
+
+    expect(input.vm.localValue).toEqual('TEST')
+    expect(input.emitted('update')).toBeDefined()
+    expect(input.emitted('update').length).toEqual(1)
+    expect(input.emitted('update')[0][0]).toEqual('TEST')
+    expect(typeof input.emitted('update')[1][0]).toEqual('string')
+    expect(input.emitted('input')).toBeDefined()
+    expect(input.emitted('input').length).toEqual(1)
+    expect(input.emitted('input')[0][0]).toEqual('TEST')
+    expect(typeof input.emitted('input')[0][0]).toEqual('string')
+
+    input.element.value = '123.45'
+    input.trigger('input')
+
+    expect(input.vm.localValue).toEqual('123.45')
+    expect(input.emitted('update')).toBeDefined()
+    expect(input.emitted('update').length).toEqual(2)
+    expect(input.emitted('update')[1][0]).toEqual(123.45)
+    expect(typeof input.emitted('update')[1][0]).toEqual('number')
+    expect(input.emitted('input')).toBeDefined()
+    expect(input.emitted('input').length).toEqual(2)
+    expect(input.emitted('input')[1][0]).toEqual('123.45')
+    expect(typeof input.emitted('input')[1][0]).toEqual('string')
+
+    input.element.value = '0123.450'
+    input.trigger('input')
+
+    expect(input.vm.localValue).toEqual('0123.450')
+    expect(input.emitted('update')).toBeDefined()
+    expect(input.emitted('update').length).toEqual(3)
+    expect(input.emitted('update')[2][0]).toEqual(123.45)
+    expect(typeof input.emitted('update')[2][0]).toEqual('number')
+    expect(input.emitted('input')).toBeDefined()
+    expect(input.emitted('input').length).toEqual(3)
+    expect(input.emitted('input')[2][0]).toEqual('0123.450')
+    expect(typeof input.emitted('input')[2][0]).toEqual('string')
+
+    input.element.value = '0123 450'
+    input.trigger('input')
+
+    expect(input.vm.localValue).toEqual('0123 450')
+    expect(input.emitted('update')).toBeDefined()
+    expect(input.emitted('update').length).toEqual(4)
+    expect(input.emitted('update')[3][0]).toEqual(123)
+    expect(typeof input.emitted('update')[3][0]).toEqual('number')
+    expect(input.emitted('input')).toBeDefined()
+    expect(input.emitted('input').length).toEqual(4)
+    expect(input.emitted('input')[3][0]).toEqual('0123 450')
+    expect(typeof input.emitted('input')[3][0]).toEqual('string')
+  })
 })

From 77e07c6206fe8fb8e7ada3b2f86016412976991e Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Tue, 20 Nov 2018 23:30:45 -0400
Subject: [PATCH 62/66] Update README.md

---
 src/components/form-textarea/README.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/form-textarea/README.md b/src/components/form-textarea/README.md
index 37022d54cf0..e72304322fd 100644
--- a/src/components/form-textarea/README.md
+++ b/src/components/form-textarea/README.md
@@ -179,7 +179,9 @@ The `.number` modifer uses `parseFloat` on the input value and will return a val
 the value can be parsed as a number (via `parseFloat`), otherwise the original input value is
 returned as type `String`. This is the same behaviour as the native `.number` modifier.
 
-The `number` prop takes precedence over the `trim` prop.
+**Notes:**
+- The `number` prop takes precedence over the `trim` prop.
+- The `trim` and `number` modifier props do not affect the value returned by the `input` or `change` events. These events will aways return the string value of the content of `<textarea>` after optional formatting (which may not match the value returned via the `v-model` `update` event which handles the modifiers).
 
 
 ## Native and custom events

From 6b8f05237fa53726295bf9e0d5baf49197631fe2 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Tue, 20 Nov 2018 23:34:43 -0400
Subject: [PATCH 63/66] test lint

---
 src/components/form-textarea/form-textarea.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/form-textarea/form-textarea.spec.js b/src/components/form-textarea/form-textarea.spec.js
index f036ccb5e45..74da11bd0d1 100644
--- a/src/components/form-textarea/form-textarea.spec.js
+++ b/src/components/form-textarea/form-textarea.spec.js
@@ -816,7 +816,7 @@ describe('form-textarea', async () => {
       attachToDocument: true,
       propsData: {
         value: '',
-        number
+        number: true
       }
     })
     expect(input.vm.localValue).toEqual('')

From 546e0fd2496b7019c3caa88418791125178993a8 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Tue, 20 Nov 2018 23:41:43 -0400
Subject: [PATCH 64/66] Update form-textarea.spec.js

---
 src/components/form-textarea/form-textarea.spec.js | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/components/form-textarea/form-textarea.spec.js b/src/components/form-textarea/form-textarea.spec.js
index 74da11bd0d1..614344a03cf 100644
--- a/src/components/form-textarea/form-textarea.spec.js
+++ b/src/components/form-textarea/form-textarea.spec.js
@@ -794,8 +794,7 @@ describe('form-textarea', async () => {
 
     expect(input.vm.localValue).toEqual('  TEST  ')
     expect(input.emitted('update')).toBeDefined()
-    expect(input.emitted('update').length).toEqual(4)
-    expect(input.emitted('update')[3][0]).toEqual('TEST')
+    expect(input.emitted('update').length).toEqual(3) // not emitted because no change in value
     expect(input.emitted('input')).toBeDefined()
     expect(input.emitted('input').length).toEqual(4)
     expect(input.emitted('input')[3][0]).toEqual('  TEST  ')
@@ -804,8 +803,7 @@ describe('form-textarea', async () => {
 
     expect(input.vm.localValue).toEqual('  TEST  ')
     expect(input.emitted('update')).toBeDefined()
-    expect(input.emitted('update').length).toEqual(4)
-    expect(input.emitted('update')[3][0]).toEqual('TEST')
+    expect(input.emitted('update').length).toEqual(3) // not emitted because no change in value
     expect(input.emitted('change')).toBeDefined()
     expect(input.emitted('change').length).toEqual(1)
     expect(input.emitted('change')[3][0]).toEqual('  TEST  ')
@@ -828,7 +826,7 @@ describe('form-textarea', async () => {
     expect(input.emitted('update')).toBeDefined()
     expect(input.emitted('update').length).toEqual(1)
     expect(input.emitted('update')[0][0]).toEqual('TEST')
-    expect(typeof input.emitted('update')[1][0]).toEqual('string')
+    expect(typeof input.emitted('update')[0][0]).toEqual('string')
     expect(input.emitted('input')).toBeDefined()
     expect(input.emitted('input').length).toEqual(1)
     expect(input.emitted('input')[0][0]).toEqual('TEST')

From 608fa5cd5a85f8f834a0745e208220b4f689d5a4 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Tue, 20 Nov 2018 23:45:24 -0400
Subject: [PATCH 65/66] Update form-textarea.spec.js

---
 src/components/form-textarea/form-textarea.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/form-textarea/form-textarea.spec.js b/src/components/form-textarea/form-textarea.spec.js
index 614344a03cf..2879d5fdf37 100644
--- a/src/components/form-textarea/form-textarea.spec.js
+++ b/src/components/form-textarea/form-textarea.spec.js
@@ -806,7 +806,7 @@ describe('form-textarea', async () => {
     expect(input.emitted('update').length).toEqual(3) // not emitted because no change in value
     expect(input.emitted('change')).toBeDefined()
     expect(input.emitted('change').length).toEqual(1)
-    expect(input.emitted('change')[3][0]).toEqual('  TEST  ')
+    expect(input.emitted('change')[0][0]).toEqual('  TEST  ')
   })
 
   it('number modifier prop works', async () => {

From 3c30f3bb92c2a1df6235c0becc0d27ab43a89e75 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Tue, 20 Nov 2018 23:55:09 -0400
Subject: [PATCH 66/66] Update README.md

---
 src/components/form-textarea/README.md | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/components/form-textarea/README.md b/src/components/form-textarea/README.md
index e72304322fd..9e1453d7e4e 100644
--- a/src/components/form-textarea/README.md
+++ b/src/components/form-textarea/README.md
@@ -80,6 +80,7 @@ number of lines (or leave it at the default of `2`).
 To limit the maximum rows that the text area will grow to (before showing a scrollbar),
 set the `max-rows` prop to the maximum number of lines of text.
 
+
 ## Textarea contextual states
 Bootstrap includes validation styles for `valid` and `invalid` states on most form controls.
 
@@ -173,15 +174,12 @@ custom component based inputs, and may generate a bad user experience. Avoid usi
 
 To get around this, `<b-for-textarea>` and `<b-form-input>` have two boolean props `trim` and `number`
 which emulate the native Vue `v-model` modifiers `.trim` and `.number` respectivley. Emulation of the
-`.lazy` modifier is _not_ supported (listen for `change` event instead).
-
-The `.number` modifer uses `parseFloat` on the input value and will return a value of type `Number` if
-the value can be parsed as a number (via `parseFloat`), otherwise the original input value is
-returned as type `String`. This is the same behaviour as the native `.number` modifier.
+`.lazy` modifier is _not_ supported (listen for `change` or `blur` events instead).
 
 **Notes:**
-- The `number` prop takes precedence over the `trim` prop.
-- The `trim` and `number` modifier props do not affect the value returned by the `input` or `change` events. These events will aways return the string value of the content of `<textarea>` after optional formatting (which may not match the value returned via the `v-model` `update` event which handles the modifiers).
+- The `number` prop takes precedence over the `trim` prop (i.e. `trim` will have no effect when `number` is set).
+- When using the `number` prop, and if the value can be parsed as a number (via `parseFloat`) it will return a value of type `Number` to the `v-model`, otherwise the original input value is returned as type `String`. This is the same behaviour as the native `.number` modifier.
+- The `trim` and `number` modifier props do not affect the value returned by the `input` or `change` events. These events will aways return the string value of the content of `<textarea>` after optional formatting (which may not match the value returned via the `v-model` `update` event, which handles the modifiers).
 
 
 ## Native and custom events