Merge pull request #206 from NoRedInk/fix-autoresizing-text-area

Fix autoresizing for TextArea

lib/TextArea/V4.js

@@ -0,0 +1,57 @@
+CustomElement = require('../CustomElement')
+
+CustomElement.create({
+  tagName: 'nri-textarea-v4',
+
+  initialize: function() {
+    this._autoresize = false
+  },
+
+  onConnect: function() {
+    this._textarea = this.querySelector('textarea')
+    this._updateListener()
+  },
+
+  observedAttributes: ['data-autoresize'],
+
+  onAttributeChange: function(name, previous, next) {
+    if (name === 'data-autoresize') {
+      this._autoresize = next !== null
+      if (!this._textarea) return
+      this._updateListener()
+    }
+  },
+
+  methods: {
+    _updateListener: function() {
+      if (this._autoresize) {
+        this._textarea.addEventListener('input', this._resize)
+        this._resize()
+      } else {
+        this._textarea.removeEventListener('input', this._resize)
+      }
+    },
+
+    _resize: function() {
+      var minHeight = null
+      if (this._textarea.style.minHeight) {
+        minHeight = parseInt(this._textarea.style.minHeight, 10)
+      } else {
+        minHeight = parseInt(window.getComputedStyle(this._textarea).minHeight, 10)
+      }
+      if (minHeight === 0) {
+        minHeight = parseInt(window.getComputedStyle(this._textarea).height, 10)
+      }
+
+      this._textarea.style.overflowY = 'hidden'
+      this._textarea.style.minHeight = minHeight + 'px'
+      this._textarea.style.transition = 'none'
+      if (this._textarea.scrollHeight > minHeight) {
+        this._textarea.style.height = minHeight + 'px'
+        this._textarea.style.height = this._textarea.scrollHeight + 'px'
+      } else {
+        this._textarea.style.height = minHeight + 'px'
+      }
+    }
+  }
+})

lib/index.js

@@ -1 +1,2 @@
 require('./TextArea/V3')
+require('./TextArea/V4')

src/Nri/Ui/TextArea/V4.elm

@@ -10,6 +10,15 @@ module Nri.Ui.TextArea.V4 exposing (view, writing, contentCreation, Height(..),
 
 ## The Nri styleguide-specified textarea with overlapping label
 
+
+## Creating New Versions
+
+When upgrading this module, we need to make sure to also include a new
+custom element, or else autosizing will break! This means doing the following:
+
+1.  Creating a new module in `lib/TextArea`
+2.  Requiring that module in `lib/index.js`
+
 @docs view, writing, contentCreation, Height, HeightBehavior, Model, generateId
 
 -}