Skip to content

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

Merged
brandyscarney merged 42 commits intonextfrom
FW-6912-textarea
Feb 5, 2026
Merged

feat(textarea): convert to a form associated shadow component#30785
brandyscarney merged 42 commits intonextfrom
FW-6912-textarea

Conversation

@brandyscarney
Copy link
Member

@brandyscarney brandyscarney commented Nov 14, 2025

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

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

Project Deployment Actions Updated (UTC)
ionic-framework Ready Ready Preview, Comment Feb 5, 2026 6:21pm

Request Review

@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
Copy link
Contributor

@thetaPC thetaPC left a comment

Choose a reason for hiding this comment

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

LGTM

Copy link
Contributor

@thetaPC thetaPC left a comment

Choose a reason for hiding this comment

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

LGTM

@brandyscarney brandyscarney merged commit 1d36021 into next Feb 5, 2026
49 checks passed
@brandyscarney brandyscarney deleted the FW-6912-textarea branch February 5, 2026 18:35
brandyscarney added a commit that referenced this pull request Feb 5, 2026
…#30884)

Issue number: internal

---------

## What is the current behavior?
Input Otp 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-input-otp` to `shadow` with `formAssociated: true`
- Adds shadow parts for inner elements

## Does this introduce a breaking change?
- [x] Yes
- [ ] No

BREAKING CHANGE:

Input Otp 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-input-otp` in your CSS, you will need to target the `group`, `container`, `native`, `separator` or `description` [Shadow Parts](https://ionicframework.com/docs/theming/css-shadow-parts) instead, or use the provided CSS Variables.

---------

Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants