fix(textarea): autogrow resizes correctly (#27691)

Issue number: resolves #27688

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Autogrow broke as a result of
8bcd9e8b35.
`white-space: pre-wrap` used to be on the host, but it was discovered
that this caused textareas that had any white space to break visually.

As a result, I moved `white-space: pre-wrap` to apply on the host only
for the legacy textarea. The modern textarea had `white-space: pre-wrap`
set on the native textarea.

We also had `white-space: pre-wrap` set on the `::after` pseudo element
for autogrow:
f29c66aee2/core/src/components/textarea/textarea.scss (L311)

However, we also use the `text-inherit` mixin:
f29c66aee2/core/src/components/textarea/textarea.scss (L322)
This mixin sets `white-space: inherit` and also overrides the `pre-wrap`
we had set. As a result, the whitespace was being inherited from the
default white space instead of `pre-wrap`.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Textarea no longer overrides the explicit `white-space: pre-wrap` on
the `::after` element.
- Re-enabled a skipped autogrow test that would have caught this bug
- Fixed a whitespace issue in another autogrow test


Note: The legacy screenshot diffs in
6ba2093166
are unrelated to this PR. Now that we are unskipping them the
screenshots have been updated. I verified this in
https://github.com/ionic-team/ionic-framework/pull/27692. This PR shows
a branch created off `7.0.x` (which does not have the reported
regression) and the tests enabled w/ the screenshots updated. The linked
verification PR can be closed when this PR merges.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Dev build: 7.1.1-dev.11687532007.11a1a9a4

---------

Co-authored-by: ionitron <hi@ionicframework.com>

core/src/components/textarea/test/autogrow/textarea.e2e.ts

@@ -11,8 +11,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
       await expect(page).toHaveScreenshot(screenshot(`textarea-autogrow-diff`));
     });
 
-    // TODO(FW-3920): Autogrow test is flaky
-    test.skip('should grow when typing', async ({ page }) => {
+    test('should grow when typing', async ({ page }) => {
       await page.setContent(
         `
         <ion-textarea aria-label="Textarea" auto-grow="true"></ion-textarea>
@@ -25,6 +24,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
 
       await nativeTextarea.type('Now, this is a story all about how');
 
+      await page.waitForChanges();
       await expect(ionTextarea).toHaveScreenshot(screenshot(`textarea-autogrow-initial`));
 
       await nativeTextarea.type(
@@ -52,8 +52,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
             <ion-textarea
               aria-label="Textarea"
               auto-grow="true"
-              value="abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz">
-            </ion-textarea>
+              value="abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz"></ion-textarea>
           </ion-content>
         </ion-app>`,
         config

core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts

@@ -14,8 +14,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
       expect(await page.screenshot()).toMatchSnapshot(screenshot(`textarea-autogrow-diff`));
     });
 
-    // TODO(FW-3920): Autogrow test is flaky
-    test.skip('should grow when typing', async ({ page }) => {
+    test('should grow when typing', async ({ page }) => {
       await page.setContent(
         `
         <ion-app>
@@ -66,8 +65,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
             <ion-textarea
               legacy="true"
               auto-grow="true"
-              value="abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz">
-            </ion-textarea>
+              value="abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz"></ion-textarea>
           </ion-content>
         </ion-app>`,
         config

core/src/components/textarea/textarea.scss

@@ -173,8 +173,28 @@
   @include border-radius(var(--border-radius));
 }
 
-.native-textarea,
-// TODO: FW-2876 - Remove this selector, keep .native-textarea
+.native-textarea {
+  color: inherit;
+
+  font-family: inherit;
+  font-size: inherit;
+  font-style: inherit;
+  font-weight: inherit;
+
+  letter-spacing: inherit;
+
+  text-align: inherit;
+  text-decoration: inherit;
+  text-indent: inherit;
+  text-overflow: inherit;
+  text-transform: inherit;
+
+  grid-area: 1 / 1 / 2 / 2;
+
+  word-break: break-word;
+}
+
+// TODO: FW-2876 - Remove this selector
 :host(.legacy-textarea) .textarea-legacy-wrapper::after {
   @include text-inherit();
 
@@ -319,9 +339,28 @@
 .native-wrapper::after {
   @include padding(var(--padding-top), 0, var(--padding-bottom), 0);
   @include margin(0, 0, 0, 0);
-  @include text-inherit();
   @include border-radius(var(--border-radius));
 
+  /**
+   * Note: Do not use @include text-inherit()
+   * as that sets white-space: inherit
+   * Instead, we use white-space: pre-wrap above.
+   */
+  color: inherit;
+
+  font-family: inherit;
+  font-size: inherit;
+  font-style: inherit;
+  font-weight: inherit;
+
+  letter-spacing: inherit;
+
+  text-align: inherit;
+  text-decoration: inherit;
+  text-indent: inherit;
+  text-overflow: inherit;
+  text-transform: inherit;
+
   grid-area: 1 / 1 / 2 / 2;
 
   word-break: break-word;