fix(textfield): textarea actually grows with multiline

packages/textfield/src/Textfield.ts

@@ -288,12 +288,12 @@ export class TextfieldBase extends ManageHelpText(
         return this.value.toString();
     }
 
+    // prettier-ignore
     private get renderMultiline(): TemplateResult {
         return html`
             ${this.multiline && this.grows && this.rows === -1
                 ? html`
-                      <div id="sizer" class="input" aria-hidden="true">
-                          ${this.value}&#8203;
+                      <div id="sizer" class="input" aria-hidden="true">${this.value}&#8203;
                       </div>
                   `
                 : nothing}

packages/textfield/src/textfield.css

@@ -52,6 +52,7 @@ textarea {
     block-size: auto;
     word-break: break-word;
     opacity: 0;
+    white-space: pre-line;
 }
 
 .icon,

packages/textfield/test/textfield.test.ts

@@ -323,6 +323,34 @@ describe('Textfield', () => {
             : null;
         expect(sizer).to.be.null;
     });
+    it('multiline with grows actually grow', async () => {
+        const el = await litFixture<Textfield>(
+            html`
+                <sp-textfield
+                    placeholder="Enter your name"
+                    multiline
+                    grows
+                ></sp-textfield>
+            `
+        );
+        expect(el).to.not.equal(undefined);
+        const textArea = el.shadowRoot.querySelector('textarea');
+        expect(textArea).to.not.be.null;
+        if (textArea) {
+            const initialHeight = textArea.offsetHeight;
+            el.focus();
+            el.select();
+            for (let i = 0; i < 100; i++) {
+                await sendKeys({
+                    type: 'ab',
+                });
+                await sendKeys({ press: 'Enter' });
+            }
+            const finalHeight = textArea.offsetHeight;
+            expect(initialHeight).to.be.lt(finalHeight);
+        }
+    });
+
     it('valid', async () => {
         const el = await litFixture<Textfield>(
             html`