Skip to content

feat(textarea): convert to a form associated shadow component #30785

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
brandyscarney wants to merge 31 commits into
base: next
Choose a base branch
from
Open

feat(textarea): convert to a form associated shadow component #30785

brandyscarney wants to merge 31 commits into from
+1,171 −237

Conversation

@brandyscarney
Copy link
Member

@brandyscarney brandyscarney commented Nov 14, 2025 •
edited
Loading

Issue number: internal

What is the current behavior?

Textarea uses scoped encapsulation. This causes issues with CSP compatibility and is inconsistent with our goal of having all components use Shadow DOM.

What is the new behavior?

  • Converts ion-textarea to shadow with formAssociated: true
  • Adds shadow parts for inner elements
  • Adds and updates existing e2e tests in core for textarea
  • Updated Angular test app to target textarea shadowRoot and updated lazy forms test to include textarea (standalone already has these)
  • Updated React & Vue test apps to target textarea shadowRoot and added validation tests
  • Improves focus behavior inside of a popover so that it is no longer required to tab twice to get to the textarea in any browser

Does this introduce a breaking change?

  • Yes
  • No
BREAKING CHANGE:

Textarea has been converted to use [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM).

If you were targeting the internals of `ion-textarea` in your CSS, you will need to target the `container`, `label`, `native`, `supporting-text`, `helper-text`, `error-text`, `counter`, or `bottom` [Shadow Parts](https://ionicframework.com/docs/theming/css-shadow-parts) instead, or use the provided CSS Variables.

Other information

Dev build: 8.7.13-dev.11765925297.1bb45463

@vercel
Copy link

vercel bot commented Nov 14, 2025 •
edited
Loading

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

Project Deployment Review Updated (UTC)
ionic-framework Ready Ready Preview, Comment Dec 16, 2025 10:59pm

@github-actions github-actions bot added the package: core @ionic/core package label Nov 14, 2025
@github-actions github-actions bot added package: angular @ionic/angular package package: vue @ionic/vue package package: react @ionic/react package labels Nov 17, 2025
@brandyscarney brandyscarney changed the title refactor(textarea): convert to a form associated shadow component feat(textarea): convert to a form associated shadow component Dec 5, 2025
@brandyscarney brandyscarney marked this pull request as ready for review December 16, 2025 22:56
@brandyscarney brandyscarney requested a review from a team as a code owner December 16, 2025 22:56
brandyscarney
brandyscarney commented Dec 17, 2025
View reviewed changes
BREAKING.md
```
```

<h4 id="version-9x-radio-group">Radio Group</h4>
Copy link
Member Author

@brandyscarney brandyscarney Dec 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Radio Group was in the wrong place in this file I just moved it down under Grid.

brandyscarney
brandyscarney commented Dec 17, 2025
View reviewed changes
core/src/components/popover/test/basic/popover.e2e.ts
// for Firefox, ion-textarea is focused first
// need to tab again to get to native input
if (browserName === 'firefox') {
await page.keyboard.press(tabKey);
Copy link
Member Author

@brandyscarney brandyscarney Dec 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I updated the focus behavior to remove the requirement to double tab to get to the native textarea in Firefox.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@OS-jacobbell OS-jacobbell Awaiting requested review from OS-jacobbell OS-jacobbell is a code owner automatically assigned from ionic-team/framework

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

package: angular @ionic/angular package package: core @ionic/core package package: react @ionic/react package package: vue @ionic/vue package

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@brandyscarney