feat(textarea): adjusting min-height of the textarea for ionic theme by rugoncalves · Pull Request #30957 · ionic-team/ionic-framework

rugoncalves · 2026-02-16T17:58:48Z

Issue number: resolves internal

What is the current behavior?

The height of the textarea would not correspond to the rows number, when it the row number was set to 1:
Ionic theme specifics:
- Some paddings and margins were applied in different place;

What is the new behavior?

The min-height is now respecting the rows attribute:
The ionic theme has the following changes:
- .textarea-size-* classes stopped forcing the min-height;

Does this introduce a breaking change?

Yes
No

Other information

Original PR

vercel · 2026-02-16T17:58:53Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
ionic-framework	Ready	Preview, Comment	Feb 16, 2026 7:15pm

Copilot

Pull request overview

This PR fixes an issue where textareas with the rows attribute set to 1 (or other values) would not properly respect the row count due to forced min-height values in the Ionic theme. The fix adjusts padding placement and removes fixed min-height constraints when the rows attribute is present.

Changes:

Removed hardcoded min-height values from .textarea-size-* classes in the Ionic theme
Added min-height: auto override for textareas with the rows attribute
Moved padding from .textarea-wrapper-inner to .native-textarea when rows is set (for proper scrolling behavior)
Added comprehensive e2e tests for the rows functionality

Reviewed changes

Copilot reviewed 4 out of 91 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
`textarea.ionic.scss`	Removed `min-height` from size classes; added padding redistribution for rows attribute
`textarea.common.scss`	Added `min-height: auto` override for textareas with rows attribute
`test/rows/textarea.e2e.ts`	New comprehensive test suite for rows functionality
`test/rows/index.html`	New manual testing page for rows feature
Various snapshot files	Updated visual regression test snapshots

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

core/src/components/textarea/textarea.ionic.scss

core/src/components/textarea/textarea.common.scss

…amework into ROU-12443-v4

thetaPC · 2026-02-17T18:06:29Z

@rugoncalves for future PRs, please make sure to link the original PR since it is helpful to review feedback left by the reviewers. I've already added the link.

thetaPC · 2026-02-17T17:43:18Z

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

+ * Rows attribute is only available in the Ionic theme.
+ * When set, it increases the container min-height to accommodate the number of rows.


Let's be consistent with the other tests:

Suggested change

* Rows attribute is only available in the Ionic theme.

* When set, it increases the container min-height to accommodate the number of rows.

* This behavior does not vary across directions

* This behavior only applies to the `ionic` theme.

thetaPC · 2026-02-17T17:44:21Z

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

+ */
+configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('textarea: rows'), () => {
+    test('should respect rows attribute and set min-height', async ({ page }) => {


Suggested change

test('should respect rows attribute and set min-height', async ({ page }) => {

test('should respect rows attribute, async ({ page }) => {

thetaPC · 2026-02-17T17:48:59Z

core/src/components/textarea/test/rows/index.html

We don't need to have examples of multiple rows example. Keep it simple:

Default (no size) with the row of 3

Small with the row of 3

Medium with the row of 3

Large with the row of 3

Default (no size) with the row of 3 and autosize

thetaPC · 2026-02-17T17:49:20Z

core/src/components/textarea/test/rows/index.html

Remove the label-placement attribute since the rows changes is not associated to the label based on the CSS.

thetaPC · 2026-02-17T17:49:54Z

core/src/components/textarea/test/rows/index.html

Remove the helper-text since we don't need to extra indication of how many rows there are since it's being defined in the header.

thetaPC · 2026-02-17T18:20:59Z

core/src/components/textarea/textarea.ionic.scss

+:host([rows]:not([auto-grow])) .start-slot-wrapper,
+:host([rows]:not([auto-grow])) .end-slot-wrapper {
+  @include globals.padding(var(--padding-top), 0, var(--padding-bottom), 0);
+}


Why is this needed? There's no example on the test page or in the E2E tests. Add an example to verify that these styles are needed.

thetaPC · 2026-02-17T18:21:54Z

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

+      await expect(container).toHaveScreenshot(screenshot(`textarea-rows-different-values`));
+    });
+
+    test('should respect rows attribute with fill outline and solid', async ({ page }) => {


Remove this test since the change is not dependent to the outline. Make sure to delete the old snapshots too.

thetaPC · 2026-02-17T18:25:09Z

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

+      );
+
+      const container = page.locator('#container');
+      await expect(container).toHaveScreenshot(screenshot(`textarea-rows-different-sizes`));


Suggested change

await expect(container).toHaveScreenshot(screenshot(`textarea-rows-different-sizes`));

await expect(container).toHaveScreenshot(screenshot(`textarea-rows-sizes`));

Make sure to delete the old snapshots too.

thetaPC · 2026-02-17T18:25:48Z

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

+      await expect(container).toHaveScreenshot(screenshot(`textarea-rows-different-sizes`));
+    });
+
+    test('should respect rows attribute with value content', async ({ page }) => {


Delete this test since it's the same as the first one. Make sure to delete the old snapshots too.

thetaPC · 2026-02-17T18:26:08Z

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

+      );
+
+      const textarea = page.locator('ion-textarea');
+      await expect(textarea).toHaveScreenshot(screenshot(`textarea-rows-3-autogrow`));


Suggested change

await expect(textarea).toHaveScreenshot(screenshot(`textarea-rows-3-autogrow`));

await expect(textarea).toHaveScreenshot(screenshot(`textarea-rows-autogrow`));

Make sure to delete the old snapshots too.

rugoncalves and others added 14 commits February 16, 2026 10:25

Adding half row height to textarea wrapper

8e44a84

Adding tests

6d2cf2f

Trying out to increase height differently

be69a19

Change labels in tests

ed3e0d3

Adding paddings

98c4643

chore(): add updated snapshots

8d105ba

Fixing the visual tests

06dba03

chore(): add updated snapshots

1002e0a

Specifying when height should be 0

00b375b

chore(): add updated snapshots

3c2ae2f

Removing setting height = 0

dbbde87

chore(): add updated snapshots

a64bba9

Re-adding the height: 0

682c40f

Enforcing respect over row parameter

d17e70c

vercel bot deployed to Preview February 16, 2026 17:58 View deployment

Copilot AI review requested due to automatic review settings February 16, 2026 17:58

rugoncalves requested a review from a team as a code owner February 16, 2026 17:58

rugoncalves requested a review from ShaneK February 16, 2026 17:58

github-actions bot added the package: core @ionic/core package label Feb 16, 2026

rugoncalves marked this pull request as draft February 16, 2026 17:59

Copilot started reviewing on behalf of rugoncalves February 16, 2026 17:59 View session

Fix on the height

4f4283a

Copilot AI reviewed Feb 16, 2026

View reviewed changes

core/src/components/textarea/textarea.ionic.scss Outdated Show resolved Hide resolved

core/src/components/textarea/textarea.common.scss Outdated Show resolved Hide resolved

rugoncalves marked this pull request as ready for review February 16, 2026 18:04

vercel bot deployed to Preview February 16, 2026 18:04 View deployment

rugoncalves marked this pull request as draft February 16, 2026 18:05

chore(): add updated snapshots

388c87b

rugoncalves marked this pull request as ready for review February 16, 2026 18:33

Removing extra leading space

fe037ef

vercel bot deployed to Preview February 16, 2026 18:35 View deployment

Merge branch 'ROU-12443-v4' of https://github.com/ionic-team/ionic-fr…

7780e6d

…amework into ROU-12443-v4

vercel bot deployed to Preview February 16, 2026 18:37 View deployment

Removing forced height

8390653

vercel bot deployed to Preview February 16, 2026 18:40 View deployment

chore(): add updated snapshots

75b34a5

vercel bot deployed to Preview February 16, 2026 18:44 View deployment

rugoncalves added 2 commits February 16, 2026 20:03

Fix lint

10cbe31

Merge branch 'ROU-12443-v4' of https://github.com/ionic-team/ionic-fr…

5b8a456

…amework into ROU-12443-v4

vercel bot deployed to Preview February 16, 2026 19:15 View deployment

thetaPC requested changes Feb 17, 2026

View reviewed changes

		* Rows attribute is only available in the Ionic theme.
		* When set, it increases the container min-height to accommodate the number of rows.

	test('should respect rows attribute and set min-height', async ({ page }) => {
	test('should respect rows attribute, async ({ page }) => {

	await expect(container).toHaveScreenshot(screenshot(`textarea-rows-different-sizes`));
	await expect(container).toHaveScreenshot(screenshot(`textarea-rows-sizes`));

	await expect(textarea).toHaveScreenshot(screenshot(`textarea-rows-3-autogrow`));
	await expect(textarea).toHaveScreenshot(screenshot(`textarea-rows-autogrow`));

Conversation

rugoncalves commented Feb 16, 2026 • edited by thetaPC Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What is the current behavior?

What is the new behavior?

Does this introduce a breaking change?

Other information

Uh oh!

vercel bot commented Feb 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

thetaPC commented Feb 17, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

rugoncalves commented Feb 16, 2026 •

edited by thetaPC

Loading

vercel bot commented Feb 16, 2026 •

edited

Loading