diff --git a/core/src/components/textarea/test/autogrow/textarea.e2e.ts b/core/src/components/textarea/test/autogrow/textarea.e2e.ts
index 2b6f6119d8..416144fcb0 100644
--- a/core/src/components/textarea/test/autogrow/textarea.e2e.ts
+++ b/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(
`
@@ -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 }) => {
-
+ value="abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz">
`,
config
diff --git a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts
index dc39462842..32a46889c5 100644
--- a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts
+++ b/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(
`
@@ -66,8 +65,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-
+ value="abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz">
`,
config
diff --git a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-ios-ltr-Mobile-Chrome-linux.png
index 8dbbcb70c6..bd8a9e696d 100644
Binary files a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-ios-ltr-Mobile-Firefox-linux.png
index 59985790bc..62e16123f5 100644
Binary files a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-ios-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-ios-ltr-Mobile-Safari-linux.png
index 04e9cc6463..48183d3fbd 100644
Binary files a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-md-ltr-Mobile-Chrome-linux.png
index a5df640363..63640ab228 100644
Binary files a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-md-ltr-Mobile-Firefox-linux.png
index a5f2eb8c9b..b750e70e7a 100644
Binary files a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-md-ltr-Mobile-Safari-linux.png
index 6d0e4c2ada..9bb583798d 100644
Binary files a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-md-ltr-Mobile-Safari-linux.png and b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-ios-ltr-Mobile-Chrome-linux.png
index 7fcabada26..defbaa4b08 100644
Binary files a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-ios-ltr-Mobile-Firefox-linux.png
index 46eb90896c..0f9d1755eb 100644
Binary files a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-ios-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-ios-ltr-Mobile-Safari-linux.png
index 97021523f4..fd1ee348c2 100644
Binary files a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-md-ltr-Mobile-Chrome-linux.png
index 5e193467e4..ca141bdc34 100644
Binary files a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-md-ltr-Mobile-Firefox-linux.png
index 108a2905c7..26a3105499 100644
Binary files a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-md-ltr-Mobile-Safari-linux.png
index 296b072c55..ffc0d250d1 100644
Binary files a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-md-ltr-Mobile-Safari-linux.png and b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-ios-ltr-Mobile-Chrome-linux.png
index 806345c2d0..4c61393f92 100644
Binary files a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-ios-ltr-Mobile-Firefox-linux.png
index d959d81fc1..a092c3e48b 100644
Binary files a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-ios-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-ios-ltr-Mobile-Safari-linux.png
index b18f880e79..085d32f55d 100644
Binary files a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-md-ltr-Mobile-Chrome-linux.png
index baeb8176af..414e046c42 100644
Binary files a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-md-ltr-Mobile-Firefox-linux.png
index ba03e37272..0bc9a9a138 100644
Binary files a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-md-ltr-Mobile-Safari-linux.png
index d5c1508b70..e3d524e819 100644
Binary files a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-md-ltr-Mobile-Safari-linux.png and b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/textarea.scss b/core/src/components/textarea/textarea.scss
index e9878dffa4..6bf3911c3d 100644
--- a/core/src/components/textarea/textarea.scss
+++ b/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;