fix(input-otp): properly handle value updates and add tests

Author: brandyscarney

core/src/components.d.ts

@@ -1355,7 +1355,7 @@ export namespace Components {
          */
         "readonly": boolean;
         /**
-          * Resets the input values and focus state.
+          * Resets the value and focus state.
          */
         "reset": () => Promise<void>;
         /**

core/src/components/input-otp/input-otp.tsx

@@ -261,24 +261,31 @@ export class InputOTP implements ComponentInterface {
    * input boxes and the value of the input group is updated.
    */
   private initializeValues() {
-    if (this.value != null && String(this.value).length > 0) {
-      const chars = String(this.value).split('').slice(0, this.length);
-      chars.forEach((char, index) => {
-        if (this.validKeyPattern.test(char)) {
-          this.inputValues[index] = char;
-        }
-      });
-      // Update the value without emitting events
-      this.value = this.inputValues.join('');
+    // Clear all input values
+    this.inputValues = Array(this.length).fill('');
+
+    // If the value is null, undefined, or an empty string, return
+    if (this.value == null || String(this.value).length === 0) {
+      return;
     }
+
+    // Split the value into individual characters and validate
+    // them against the allowed pattern
+    const chars = String(this.value).split('').slice(0, this.length);
+    chars.forEach((char, index) => {
+      if (this.validKeyPattern.test(char)) {
+        this.inputValues[index] = char;
+      }
+    });
+    // Update the value without emitting events
+    this.value = this.inputValues.join('');
   }
 
   /**
-   * Resets the input values and focus state.
+   * Resets the value and focus state.
    */
   @Method()
   async reset() {
-    this.inputValues = Array(this.length).fill('');
     this.value = '';
 
     this.focusedValue = null;
@@ -790,7 +797,8 @@ export class InputOTP implements ComponentInterface {
           class={{
             'input-otp-description': true,
             'input-otp-description-hidden': !hasDescription,
-          }}>
+          }}
+        >
           <slot></slot>
         </div>
       </Host>

core/src/components/input-otp/test/a11y/input-otp.e2e.ts

@@ -78,7 +78,10 @@ configs().forEach(({ title, config }) => {
     });
 
     test('should update aria-label and aria-labelledby when set on host', async ({ page }) => {
-      await page.setContent(`<ion-input-otp aria-label="Custom label" aria-labelledby="my-label"></ion-input-otp>`, config);
+      await page.setContent(
+        `<ion-input-otp aria-label="Custom label" aria-labelledby="my-label"></ion-input-otp>`,
+        config
+      );
 
       const inputOtpGroup = page.locator('ion-input-otp .input-otp-group');
       await expect(inputOtpGroup).toHaveAttribute('aria-label', 'Custom label');

packages/angular/test/base/e2e/src/lazy/inputs.spec.ts

@@ -3,17 +3,18 @@ describe('Inputs', () => {
     cy.visit('/lazy/inputs');
   })
 
-  it('should have default value', () => {
+  it('should have default values', () => {
     cy.get('ion-checkbox').should('have.prop', 'checked').and('equal', true);
     cy.get('ion-radio-group').should('have.prop', 'value').and('equal', 'nes');
     cy.get('ion-toggle').should('have.prop', 'checked').and('equal', true);
     cy.get('ion-input').should('have.prop', 'value').and('equal', 'some text');
+    cy.get('ion-input-otp').should('have.prop', 'value').and('equal', '1234');
     cy.get('ion-datetime').should('have.prop', 'value').and('equal', '1994-03-15');
     cy.get('ion-select').should('have.prop', 'value').and('equal', 'nes');
     cy.get('ion-range').should('have.prop', 'value').and('equal', 50);
   });
 
-  it('should have reset value', () => {
+  it('should reset values', () => {
     cy.get('#reset-button').click();
 
     cy.get('ion-checkbox').should('have.prop', 'checked').and('equal', false);
@@ -26,33 +27,38 @@ describe('Inputs', () => {
      * value property is undefined.
      */
     cy.get('ion-input').should('not.have.prop', 'value');
+    cy.get('ion-input-otp').should('not.have.prop', 'value');
     cy.get('ion-datetime').should('not.have.prop', 'value');
     cy.get('ion-select').should('not.have.prop', 'value');
     cy.get('ion-range').should('not.have.prop', 'value');
   });
 
-  it('should get some value', () => {
+  it('should set values', () => {
     cy.get('#reset-button').click();
     cy.get('#set-button').click();
 
     cy.get('ion-checkbox').should('have.prop', 'checked').and('equal', true);
     cy.get('ion-radio-group').should('have.prop', 'value').and('equal', 'nes');
     cy.get('ion-toggle').should('have.prop', 'checked').and('equal', true);
     cy.get('ion-input').should('have.prop', 'value').and('equal', 'some text');
+    cy.get('ion-input-otp').should('have.prop', 'value').and('equal', '1234');
     cy.get('ion-datetime').should('have.prop', 'value').and('equal', '1994-03-15');
     cy.get('ion-select').should('have.prop', 'value').and('equal', 'nes');
     cy.get('ion-range').should('have.prop', 'value').and('equal', 50);
   });
 
-  it('change values should update angular', () => {
+  it('should update angular when values change', () => {
     cy.get('#reset-button').click();
 
     cy.get('ion-checkbox#first-checkbox').click();
     cy.get('ion-radio').first().click();
     cy.get('ion-toggle').first().click();
 
     cy.get('ion-input').eq(0).type('hola');
-    cy.get('ion-input input').eq(0).blur();
+    cy.focused().blur();
+
+    cy.get('ion-input-otp input').eq(0).type('1234');
+    cy.focused().blur();
 
     // Set date to 1994-03-14
     cy.get('ion-datetime').first().shadow().find('.calendar-day:not([disabled])').first().click();
@@ -68,7 +74,18 @@ describe('Inputs', () => {
     cy.get('#radio-note').should('have.text', 'nes');
     cy.get('#toggle-note').should('have.text', 'true');
     cy.get('#input-note').should('have.text', 'hola');
+    cy.get('#input-otp-note').should('have.text', '1234');
     cy.get('#datetime-note').should('have.text', '1994-03-14');
     cy.get('#select-note').should('have.text', 'ps');
   });
+
+  it('should update values when erasing input', () => {
+    cy.get('ion-input').eq(0).type('{backspace}');
+    cy.get('ion-input').should('have.prop', 'value').and('equal', 'some tex');
+    cy.get('#input-note').should('have.text', 'some tex');
+
+    cy.get('ion-input-otp input:last').eq(0).type('{backspace}');
+    cy.get('ion-input-otp').should('have.prop', 'value').and('equal', '123');
+    cy.get('#input-otp-note').should('have.text', '123');
+  });
 });

packages/angular/test/base/src/app/lazy/form/form.component.html

@@ -48,12 +48,12 @@
         <ion-input-otp id="touched-input-otp-number-test" formControlName="inputOtp" class="required">Input OTP (required)</ion-input-otp>
       </ion-item>
 
+      <ion-button id="input-otp-touched" (click)="setOtpTouched()">Set Input OTP Touched</ion-button>
+
       <ion-item>
         <ion-input-otp id="touched-input-otp-text-test" type="text" formControlName="inputOtpText" class="required">Input OTP Text (required)</ion-input-otp>
       </ion-item>
 
-      <ion-button id="input-otp-touched" (click)="setOtpTouched()">Set Input OTP Touched</ion-button>
-
       <ion-item>
         <ion-input-otp formControlName="inputOtp2">Input OTP</ion-input-otp>
       </ion-item>

packages/angular/test/base/src/app/lazy/inputs/inputs.component.html

@@ -73,7 +73,7 @@
 
     <ion-item>
       <ion-input-otp [(ngModel)]="inputOtp">Input OTP</ion-input-otp>
-      <ion-note slot="end">{{inputOtp}}</ion-note>
+      <ion-note slot="end" id="input-otp-note">{{inputOtp}}</ion-note>
     </ion-item>
 
     <ion-item color="dark">