bug(input-otp): changing length leaves value longer than rendered inputs

Author: hemanth004Created Sep 25, 2026Updated Sep 25, 2026
Labelstriage

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

  1. Render <ion-input-otp length="4" value="1234"></ion-input-otp> in an Ionic app.
  2. Change the component length at runtime: document.querySelector('ion-input-otp').setAttribute('length', '2').
  3. 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.

Source: ionic-team/ionic-framework