Skip to content

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

Description

@hemanth004

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.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions