Prerequisites
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.
Code Reproduction URL
https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/input-otp/test/basic/input-otp.e2e.ts
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.
Prerequisites
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
<ion-input-otp length="4" value="1234"></ion-input-otp>in an Ionic app.document.querySelector('ion-input-otp').setAttribute('length', '2').valueis still 1234.Code Reproduction URL
https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/input-otp/test/basic/input-otp.e2e.ts
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.