bug(input-otp): changing length leaves value longer than rendered inputs
Prerequisites
- I have read the Contributing Guidelines.
- I agree to follow the Code of Conduct.
- 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
valueis still 1234.
Code Reproduction URL
Ionic Info
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.
Source: ionic-team/ionic-framework