Skip to content

feat(input-otp): convert to a form associated shadow component #30785#30884

Merged
brandyscarney merged 56 commits intonextfrom
FW-6912-input-otp
Feb 5, 2026
Merged

feat(input-otp): convert to a form associated shadow component #30785#30884
brandyscarney merged 56 commits intonextfrom
FW-6912-input-otp

Conversation

@brandyscarney
Copy link
Member

@brandyscarney brandyscarney commented Dec 19, 2025 •
edited
Loading

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?

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

Other information

@brandyscarney
refactor(textarea): convert to a form associated shadow component
54a5e4e
@brandyscarney
style: lint
8417741
@brandyscarney
chore: build
59b2423
@brandyscarney
test(textarea): query the shadowRoot in tests
08a90a2
@brandyscarney
test(angular): add textarea to lazy forms test
f7e8146
@brandyscarney
test(vue): query textarea by shadow and add validation tests
6c7d3fb
@brandyscarney
test(react): query textarea by shadow and add validation tests
1fd0f26
@brandyscarney
test(frameworks): input-otp doesn't support required
3bf9289
@brandyscarney
test(react): blur focused element instead of targeting textarea
27c18c2
@brandyscarney
feat(textarea): expose shadow parts
cd58d35
@brandyscarney
test(textarea): add tests for form validation and customizing with parts
391d2f6
@brandyscarney
test(textarea): fix customizing bottom content css
a401ba2
@brandyscarney
fix(textarea): update styles due to shadow encapsulation
cab5efa
@brandyscarney
fix(textarea): update styles due to shadow encapsulation
4ec7a7f
@brandyscarney
fix(textarea): update element internals on load, value change, disabl…
0e4dee8 
…ed and required change
@brandyscarney
fix(textarea): add a check for ElementInternals setFormValue for tests
3c5a152
@brandyscarney
Merge branch 'next' into FW-6912-textarea
0db5da6
@brandyscarney
test(popover): add popover examples with inputs and buttons
7f25e7b
@brandyscarney
chore(): add updated snapshots
5fe0c00
@brandyscarney
test(popover): update to grab the textarea in shadow root
f39a1e3
@brandyscarney
test(popover): add tests for keyboard interactions on inputs and focu…
ec80920 
…s on buttons
@brandyscarney
fix(utils): fix focus behavior for textareas and buttons in popovers
a2a584f
@brandyscarney
fix(overlays): override tab navigation to skip over host elements
903b799
@brandyscarney
docs(breaking): add textarea conversion
91a2f74
@brandyscarney
Merge branch 'next' into FW-6912-textarea
4480c7a
@brandyscarney
docs(breaking): move radio group to the right place
efef5a1
@brandyscarney
test(textarea): use shadow part for styling native werapper
823943d
@brandyscarney
fix(textarea): add box-sizing to fix label border shift
3e724c5
@brandyscarney
Merge branch 'next' into FW-6912-textarea
34e104c
@brandyscarney
chore(): add updated snapshots
bb45463
@brandyscarney brandyscarney marked this pull request as draft January 12, 2026 22:14
@brandyscarney brandyscarney marked this pull request as ready for review January 13, 2026 16:18
thetaPC
thetaPC approved these changes Jan 16, 2026
View reviewed changes
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, one comment but not a blocker

thetaPC
thetaPC approved these changes Jan 19, 2026
View reviewed changes
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

ShaneK
ShaneK approved these changes Jan 28, 2026
View reviewed changes
Copy link
Member

@ShaneK ShaneK left a comment

Choose a reason for hiding this comment

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

Looking good! I left a couple of comments, but I consider them non-blockers. Well done!

thetaPC
thetaPC approved these changes Feb 3, 2026
View reviewed changes
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

Base automatically changed from FW-6912-textarea to next February 5, 2026 18:35
@brandyscarney brandyscarney merged commit 177a6ea into next Feb 5, 2026
49 checks passed
@brandyscarney brandyscarney deleted the FW-6912-input-otp branch February 5, 2026 18:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@ShaneK ShaneK ShaneK approved these changes

@thetaPC thetaPC thetaPC approved these changes

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.

3 participants

@brandyscarney @ShaneK @thetaPC