From 2cb701395487c6a0304400f6b821659ae6def820 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Wed, 12 Jul 2023 16:35:36 -0400
Subject: [PATCH] fix(textarea): stacked/floating textarea size is correct on
 safari (#27766)

Issue number: resolves #27345

---------

<!-- 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. -->

WebKit has a bug where children of grid elements placed inside flex
elements have the wrong size. This is causing textarea's dimensions to
spill out of its grid container. Grid is used for autogrow
functionality, and the grid itself is placed inside `.label-wrapper`
which uses flexbox for aligning the label and control.

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

- Adds `grid-auto-rows: 100%` to avoid the WebKit bug which specifies
the size of implicitly-created grid rows.

## 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.3-dev.11688748118.18ff9e7d`
WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=256781

---------

Co-authored-by: ionitron <hi@ionicframework.com>
---
 .../test/label-placement/textarea.e2e.ts      |  36 ++++++++++++++++++
 ...line-sizing-md-ltr-Mobile-Chrome-linux.png | Bin 0 -> 3867 bytes
 ...ine-sizing-md-ltr-Mobile-Firefox-linux.png | Bin 0 -> 4805 bytes
 ...line-sizing-md-ltr-Mobile-Safari-linux.png | Bin 0 -> 3253 bytes
 core/src/components/textarea/textarea.scss    |   9 +++++
 5 files changed, 45 insertions(+)
 create mode 100644 core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-multi-line-sizing-md-ltr-Mobile-Chrome-linux.png
 create mode 100644 core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-multi-line-sizing-md-ltr-Mobile-Firefox-linux.png
 create mode 100644 core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-multi-line-sizing-md-ltr-Mobile-Safari-linux.png

diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts b/core/src/components/textarea/test/label-placement/textarea.e2e.ts
index 7aff19c45c..a50672c3bf 100644
--- a/core/src/components/textarea/test/label-placement/textarea.e2e.ts
+++ b/core/src/components/textarea/test/label-placement/textarea.e2e.ts
@@ -266,4 +266,40 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
       expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-async-label`));
     });
   });
+  test.describe(title('textarea: flex in grid rendering'), () => {
+    test('should correctly render new lines in stacked textarea', async ({ page }) => {
+      /**
+       * While this bug only impacts Safari, we run this
+       * text on all browsers to make sure the Safari fix
+       * does not negatively impact other browsers.
+       */
+      test.info().annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/27345',
+      });
+
+      /**
+       * Add padding to make it easier to see
+       * if the text is incorrectly flowing outside
+       * the container on Safari.
+       */
+      await page.setContent(
+        `
+        <div style="padding: 20px;" class="container">
+          <ion-textarea fill="solid" label="Comments" label-placement="stacked"></ion-textarea>
+        </div>
+      `,
+        config
+      );
+
+      const nativeTextarea = page.locator('ion-textarea textarea');
+
+      await nativeTextarea.type(`Comment
+        With
+        Multiple
+        Lines`);
+
+      await expect(page.locator('.container')).toHaveScreenshot(screenshot(`textarea-multi-line-sizing`));
+    });
+  });
 });
diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-multi-line-sizing-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-multi-line-sizing-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..3e6b5b4eb6f682a183338641a6c07745cb2f7499
GIT binary patch
literal 3867
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
Ns6WyHij<$f{tuObXQu!F

literal 0
HcmV?d00001

diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-multi-line-sizing-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-multi-line-sizing-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..ef7986886a2c1cbf23e647d0ea2e04bf9fd68535
GIT binary patch
literal 4805
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

literal 0
HcmV?d00001

diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-multi-line-sizing-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-multi-line-sizing-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..567f26e0682546d14b13c6d3757d0cfb7ed98063
GIT binary patch
literal 3253
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
a6OtP5-(Yu7fC~PH00{k?dX;desDA=A#u32)

literal 0
HcmV?d00001

diff --git a/core/src/components/textarea/textarea.scss b/core/src/components/textarea/textarea.scss
index 6bf3911c3d..e656910bd8 100644
--- a/core/src/components/textarea/textarea.scss
+++ b/core/src/components/textarea/textarea.scss
@@ -323,6 +323,15 @@
   min-height: inherit;
   max-height: inherit;
 
+  /**
+   * This avoids a WebKit bug where
+   * the height of the inner textarea
+   * is incorrect and flows outside the
+   * parent container: https://bugs.webkit.org/show_bug.cgi?id=256781
+   * TODO FW-4734
+   */
+  grid-auto-rows: 100%;
+
   &::after {
     // This technique is used for an auto-resizing textarea.
     // The text contents are reflected as a pseudo-element that is visually hidden.