You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
bug(input-otp): changing length leaves value longer than rendered inputs #31484
I have searched for existing issues that already report this problem, without success.
Ionic Framework Version
v9.x
Current Behavior
When an existing ion-input-otp value is longer than a new length, changing the length only changes the rendered input boxes. The component value remains longer than the visible inputs.
For example, changing length from 4 to 2 leaves the two visible boxes showing 12 while the public value remains 1234.
Expected Behavior
The component should keep its public value synchronized with the rendered inputs. After changing length from 4 to 2, the value should be 12.
Steps to Reproduce
Render <ion-input-otp length="4" value="1234"></ion-input-otp> in an Ionic app.
Change the component length at runtime: document.querySelector('ion-input-otp').setAttribute('length', '2').
Observe that only two inputs render and display 12, but the component value is still 1234.
Ionic Framework: 9.0.5
Component: @ionic/core / ion-input-otp
Reproduced from the main branch source.
Additional Information
The length prop is currently watched only by processSeparators(). initializeValues() and updateTabIndexes() run for value changes, but not for runtime length changes. A regression test and minimal fix are prepared in a pull request.
Activity
fix(input-otp): sync value when length changes (ionic-team#31485)
ShaneK commentedon Oct 7, 2026
Hey! Thanks for the bug report! This has been fixed in v9.0.7!