allow calling update() with no arguments and make the published 'target' attribute work as expected

paper-autogrow-textarea.html

@@ -34,7 +34,7 @@
 
 <link href="../polymer/polymer.html" rel="import">
 
-<polymer-element name="paper-autogrow-textarea" on-input="{{inputAction}}">
+<polymer-element name="paper-autogrow-textarea">
 <template>
 
   <style>
@@ -111,6 +111,39 @@
 
     tokens: null,
 
+    _isAttached: false,
+
+    _boundUpdate: null,
+
+    _getBoundUpdate: function() {
+      this._boundUpdate = this._boundUpdate || this.update.bind(this);
+      return this._boundUpdate;
+    },
+
+    attached: function() {
+      this._isAttached = true;
+      if (!this.target) return;
+      this.target.addEventListener('input', this._getBoundUpdate());
+    },
+
+    domReady: function() {
+      if (this.target) return;
+      this.target = this.querySelector('textarea');
+    },
+
+    detached: function() {
+      this._isAttached = false;
+      if (!this.target) return;
+      this.target.removeEventListener('input', this._getBoundUpdate());
+    },
+
+    targetChanged: function(oldVal, newVal) {
+      this.update();
+      if (!this._isAttached) return;
+      if (oldVal) oldVal.removeEventListener('input', this._getBoundUpdate());
+      if (newVal) newVal.addEventListener('input', this._getBoundUpdate());
+    },
+
     observe: {
       rows: 'updateCached',
       maxRows: 'updateCached'
@@ -131,8 +164,8 @@
       return _tokens.join('<br>') + '&nbsp;';
     },
 
-    valueForMirror: function(input) {
-      this.tokens = (input && input.value) ? input.value.replace(/&/gm, '&amp;').replace(/"/gm, '&quot;').replace(/'/gm, '&#39;').replace(/</gm, '&lt;').replace(/>/gm, '&gt;').split('\n') : [''];
+    valueForMirror: function() {
+      this.tokens = (this.target && this.target.value) ? this.target.value.replace(/&/gm, '&amp;').replace(/"/gm, '&quot;').replace(/'/gm, '&#39;').replace(/</gm, '&lt;').replace(/>/gm, '&gt;').split('\n') : [''];
       return this.constrain(this.tokens);
     },
 
@@ -142,18 +175,13 @@
      * is updated imperatively.
      *
      * @method update
-     * @param Element The input
      */
-    update: function(input) {
-      this.$.mirror.innerHTML = this.valueForMirror(input);
+    update: function() {
+      this.$.mirror.innerHTML = this.valueForMirror();
     },
 
     updateCached: function() {
       this.$.mirror.innerHTML = this.constrain(this.tokens);
-    },
-
-    inputAction: function(e) {
-      this.update(e.target);
     }
 
   });

test/paper-autogrow-textarea.html

@@ -35,14 +35,25 @@
     <textarea id="textarea1"></textarea>
   </paper-autogrow-textarea>
 
-  <paper-autogrow-textarea id="autogrow2" rows="2" maxRows="4">
-    <textarea id="textarea2"></textarea>
-  </paper-autogrow-textarea>
+  <paper-autogrow-textarea id="autogrow2"></paper-autogrow-textarea>
+  <textarea id="textarea2"></textarea>
+
+  <polymer-element name="test-bind" noscript>
+    <template>
+      <paper-autogrow-textarea id="autogrow" target="{{$.textarea}}">
+      </paper-autogrow-textarea>
+      <textarea id="textarea"></textarea>
+    </template>
+  </polymer-element>
+  <test-bind id="testBind"></test-bind>
 
   <script>
 
     var a1 = document.getElementById('autogrow1');
     var t1 = document.getElementById('textarea1');
+    var a2 = document.getElementById('autogrow2');
+    var t2 = document.getElementById('textarea2');
+    var tB = document.getElementById('testBind');
 
     function dispatchInputEvent(target) {
       var e = new Event('input', {
@@ -58,10 +69,20 @@
     suite('basic', function() {
 
       teardown(function(done) {
-        t1.value = '';
-        dispatchInputEvent(t1);
-        a1.rows = 1;
-        a1.maxRows = 0;
+        var textareas = document.querySelectorAll('html /deep/ textarea');
+        for (var i = 0; i < textareas.length; i++) {
+          textareas[i].value = '';
+          dispatchInputEvent(textareas[i]);
+        }
+
+        var autogrows =
+            document.querySelectorAll('html /deep/ paper-autogrow-textarea');
+        for (var i = 0; i < autogrows.length; i++) {
+          autogrows[i].rows = 1;
+          autogrows[i].maxRows = 0;
+        }
+
+        a2.target = null;
 
         flush(function() {
           done();
@@ -138,6 +159,45 @@
         });
       });
 
+      test('can update size by calling update with no arguments', function() {
+        var h1 = a1.offsetHeight;
+        t1.value = 'one\ntwo\nthree';
+        a1.update();
+        assert.equal(a1.offsetHeight, h1 * 3);
+      });
+
+      test('can set the target programatically', function() {
+        var h1 = a2.offsetHeight;
+        a2.target = t2;
+        t2.value = 'one\ntwo';
+        a2.update();
+        assert.equal(a2.offsetHeight, h1 * 2);
+      });
+
+      test('can set the target with a binding', function() {
+        var a = tB.$.autogrow;
+        var t = tB.$.textarea;
+        var h1 = a.offsetHeight;
+        t.value = 'one\ntwo';
+        a.update();
+        assert.equal(a.offsetHeight, h1 * 2);
+      });
+
+      test('cleans up event listeners when detached', function(done) {
+        var h1 = a1.offsetHeight;
+        t1.value = 'one\ntwo\nthree';
+
+        // Remove it during the event dispatch.
+        a1.remove();
+        dispatchInputEvent(t1);
+        document.body.appendChild(a1);
+
+        flush(function() {
+          assert.equal(a1.offsetHeight, h1);
+          done();
+        });
+      });
+
     });
 
   </script>