From 80b816e3d1623856ebcb2902e4fae53b1d5bedfd Mon Sep 17 00:00:00 2001
From: Mario Aleo <marioaleo@gmail.com>
Date: Mon, 22 Jul 2019 17:54:18 +0200
Subject: [PATCH 1/2] chore(textarea): fix typos in tests

---
 packages/textarea/test/lion-textarea.test.js | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/packages/textarea/test/lion-textarea.test.js b/packages/textarea/test/lion-textarea.test.js
index 187a8b523..0e2aebf2d 100644
--- a/packages/textarea/test/lion-textarea.test.js
+++ b/packages/textarea/test/lion-textarea.test.js
@@ -11,7 +11,7 @@ describe('<lion-textarea>', () => {
     expect(el.querySelector('textarea').nodeName).to.equal('TEXTAREA');
   });
 
-  it('has a default minRows of 2 and maxRows of 10', async () => {
+  it('has default minRows and maxRows', async () => {
     const el = await fixture(`<lion-textarea></lion-textarea>`);
     expect(el.rows).to.equal(2);
     expect(el.maxRows).to.equal(6);
@@ -31,13 +31,13 @@ describe('<lion-textarea>', () => {
     const initialHeight = el.offsetHeight;
     el.modelValue = 'batman\nand\nrobin\nand\ncatwoman';
     await el.updateComplete;
-    const hightWith4TextLines = el.offsetHeight;
-    expect(hightWith4TextLines > initialHeight).to.equal(true);
+    const hightWith5TextLines = el.offsetHeight;
+    expect(hightWith5TextLines > initialHeight).to.equal(true);
 
     el.modelValue = 'batman';
     await el.updateComplete;
     const hightWith1Line = el.offsetHeight;
-    expect(hightWith1Line < hightWith4TextLines).to.equal(true);
+    expect(hightWith1Line < hightWith5TextLines).to.equal(true);
   });
 
   it(`starts growing when content is bigger than "rows"
@@ -62,10 +62,11 @@ describe('<lion-textarea>', () => {
   });
 
   it('stops shrinking after property "rows" is reached', async () => {
-    const el = await fixture(`<lion-textarea></lion-textarea>`);
-    el.rows = 1;
-    el.maxRows = 3;
-    await el.updateComplete;
+    const el = await fixture(
+      html`
+        <lion-textarea rows="1" max-rows="3"></lion-textarea>
+      `,
+    );
 
     expect(el.scrollHeight).to.be.equal(el.clientHeight);
     const oneRowHeight = el.clientHeight;

From 885343506518ebdfc98373a0326e0bd0bc22b53e Mon Sep 17 00:00:00 2001
From: Mario Aleo <marioaleo@gmail.com>
Date: Mon, 22 Jul 2019 18:08:02 +0200
Subject: [PATCH 2/2] fix(textarea): calculate max-height based on empty state
 (fix #184)

---
 packages/textarea/src/LionTextarea.js        |  7 ++++++
 packages/textarea/test/lion-textarea.test.js | 25 ++++++++++++++++++++
 2 files changed, 32 insertions(+)

diff --git a/packages/textarea/src/LionTextarea.js b/packages/textarea/src/LionTextarea.js
index b727452c1..5593ae384 100644
--- a/packages/textarea/src/LionTextarea.js
+++ b/packages/textarea/src/LionTextarea.js
@@ -65,6 +65,10 @@ export class LionTextarea extends ObserverMixin(LionInput) {
    * To support maxRows we need to set max-height of the textarea
    */
   setTextareaMaxHeight() {
+    const { value } = this.inputElement;
+    this.inputElement.value = '';
+    this.resizeTextarea();
+
     const cs = window.getComputedStyle(this.inputElement, null);
     const lineHeight = parseFloat(cs.lineHeight) || parseFloat(cs.height) / this.rows;
     const paddingOffset = parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom);
@@ -72,6 +76,9 @@ export class LionTextarea extends ObserverMixin(LionInput) {
     const offset = cs.boxSizing === 'border-box' ? paddingOffset + borderOffset : 0;
 
     this.inputElement.style.maxHeight = `${lineHeight * this.maxRows + offset}px`;
+
+    this.inputElement.value = value;
+    this.resizeTextarea();
   }
 
   static get styles() {
diff --git a/packages/textarea/test/lion-textarea.test.js b/packages/textarea/test/lion-textarea.test.js
index 0e2aebf2d..ea6b9d880 100644
--- a/packages/textarea/test/lion-textarea.test.js
+++ b/packages/textarea/test/lion-textarea.test.js
@@ -61,6 +61,31 @@ describe('<lion-textarea>', () => {
     }, Promise.resolve(0));
   });
 
+  it('stops growing after property "maxRows" is reached when there was an initial value', async () => {
+    const el = await fixture(
+      html`
+        <lion-textarea .modelValue="${'1\n2\n3'}"></lion-textarea>
+      `,
+    );
+
+    return [4, 5, 6, 7, 8].reduce(async (heightPromise, i) => {
+      const oldHeight = await heightPromise;
+      el.modelValue += `\n`;
+      await el.updateComplete;
+      const newHeight = el.offsetHeight;
+
+      if (i > el.maxRows) {
+        // stop growing
+        expect(newHeight).to.equal(oldHeight);
+      } else if (i > el.rows) {
+        // growing normally
+        expect(newHeight >= oldHeight).to.equal(true);
+      }
+
+      return Promise.resolve(newHeight);
+    }, Promise.resolve(0));
+  });
+
   it('stops shrinking after property "rows" is reached', async () => {
     const el = await fixture(
       html`