Dispatch iron-resize event on text-area height change

vaadin · Nov 7, 2018 · 77d20f6 · 77d20f6
1 parent 9819386
commit 77d20f6
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 0 deletions.
diff --git a/src/vaadin-text-area.html b/src/vaadin-text-area.html
@@ -186,7 +186,23 @@
           input.style.removeProperty('max-width');
           inputField.style.removeProperty('display');
           inputField.scrollTop = scrollTop;
+
+          if (this.__previousInputHeight && this.__previousInputHeight !== inputHeight) {
+            this.dispatchEvent(
+              new CustomEvent('iron-resize', {
+                bubbles: true
+              })
+            );
+          }
+
+          this.__previousInputHeight = inputHeight;
         }
+
+        /**
+         * Fired when the text-area height changes.
+         *
+         * @event iron-resize
+         */
       }
 
       customElements.define(TextAreaElement.is, TextAreaElement);

diff --git a/test/text-area.html b/test/text-area.html
@@ -291,5 +291,36 @@
         ));
       });
     });
+
+    describe('resize', () => {
+      let textArea, spy;
+
+      beforeEach(() => {
+        textArea = fixture('default');
+        spy = sinon.spy();
+        textArea.addEventListener('iron-resize', spy);
+      });
+
+      it('should not dispatch `iron-resize` event on init', () => {
+        expect(spy.callCount).to.equal(0);
+      });
+
+      it('should dispatch `iron-resize` event on height change', () => {
+        textArea.value = `
+        there
+        should
+        be
+        a
+        lot
+        of
+        rows`;
+        expect(spy.callCount).to.equal(1);
+      });
+
+      it('should not dispatch `iron-resize` event on value change if height did not change', () => {
+        textArea.value = 'just 1 row';
+        expect(spy.callCount).to.equal(0);
+      });
+    });
   </script>
 </body>