fix(input-otp): always start value at first empty input when typing

Author: brandyscarney

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

@@ -190,10 +190,25 @@ export class InputOTP implements ComponentInterface {
       return;
     }
 
-    this.inputValues[index] = value;
+    // Find the first empty box before or at the current index
+    let targetIndex = index;
+    for (let i = 0; i < index; i++) {
+      if (!this.inputValues[i] || this.inputValues[i] === '') {
+        targetIndex = i;
+        break;
+      }
+    }
+
+    // Set the value at the target index
+    this.inputValues[targetIndex] = value;
+
+    // If the value was entered in a later box, clear the current box
+    if (targetIndex !== index) {
+      this.inputRefs[index].value = '';
+    }
 
     if (value.length > 0) {
-      this.focusNext(index);
+      this.focusNext(targetIndex);
     }
     this.updateValue();
   }

core/src/components/input-otp/test/basic/index.html

@@ -47,13 +47,18 @@ <h2>Default</h2>
             <ion-input-otp value="5893" length="8"> Didn't get a code? <a href="#">Resend the code</a> </ion-input-otp>
           </div>
 
+          <div class="grid-item">
+            <h2>Types</h2>
+            <ion-input-otp id="numberType"> Numbers only <span id="value"></span> </ion-input-otp>
+            <ion-input-otp id="letterAndNumberType" type="text"> Letters and numbers <span id="value"></span> </ion-input-otp>
+            <ion-input-otp id="customType" type="text" pattern="[a-fA-F]"> Custom Pattern: a-f and A-F <span id="value"></span> </ion-input-otp>
+          </div>
+
           <div class="grid-item">
             <h2>Disabled</h2>
             <ion-input-otp value="1234" disabled>Description</ion-input-otp>
             <ion-input-otp value="1234" fill="solid" disabled>Description</ion-input-otp>
-          </div>
 
-          <div class="grid-item">
             <h2>Readonly</h2>
             <ion-input-otp value="1234" readonly>Description</ion-input-otp>
             <ion-input-otp value="1234" fill="solid" readonly>Description</ion-input-otp>
@@ -64,19 +69,23 @@ <h2>Invalid</h2>
             <ion-input-otp class="ion-invalid">Description</ion-input-otp>
             <ion-input-otp fill="solid" class="ion-invalid">Description</ion-input-otp>
           </div>
-
-          <div class="grid-item">
-            <h2>Types</h2>
-            <ion-input-otp length="6"> Numbers only </ion-input-otp>
-            <ion-input-otp length="6" type="text"> Letters and numbers </ion-input-otp>
-            <ion-input-otp type="text" pattern="[a-fA-F]"> Custom Pattern: a-f and A-F </ion-input-otp>
-          </div>
         </div>
       </ion-content>
 
       <script>
         const numberValue = document.getElementById('numberValue');
         numberValue.value = 123;
+
+        // Display value under the different input types on ionChange
+        function addValueListener(id) {
+          const el = document.getElementById(id);
+          el.addEventListener('ionChange', (event) => {
+            const displayValue = event.detail.value != '' ? `(value: ${event.detail.value})` : '';
+            el.querySelector('#value').textContent = displayValue;
+          });
+        }
+
+        ['numberType', 'letterAndNumberType', 'customType'].forEach(addValueListener);
       </script>
     </ion-app>
   </body>

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

@@ -109,6 +109,72 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
     });
   });
 
+  test.describe(title('input-otp: input functionality'), () => {
+    test('should update the input value when typing 4 digits from the 1st box', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-input-otp>Description</ion-input-otp>
+      `,
+        config
+      );
+
+      const firstInput = page.locator('ion-input-otp input').first();
+      await firstInput.focus();
+
+      const inputOtp = page.locator('ion-input-otp');
+      const inputBoxes = page.locator('ion-input-otp input');
+
+      await expect(inputOtp).toHaveJSProperty('value', '');
+      await expect(inputBoxes.nth(0)).toHaveValue('');
+      await expect(inputBoxes.nth(1)).toHaveValue('');
+      await expect(inputBoxes.nth(2)).toHaveValue('');
+      await expect(inputBoxes.nth(3)).toHaveValue('');
+
+      await page.keyboard.type('12');
+
+      await expect(inputOtp).toHaveJSProperty('value', '12');
+      await expect(inputBoxes.nth(0)).toHaveValue('1');
+      await expect(inputBoxes.nth(1)).toHaveValue('2');
+      await expect(inputBoxes.nth(2)).toHaveValue('');
+      await expect(inputBoxes.nth(3)).toHaveValue('');
+
+      await page.keyboard.type('34');
+
+      await expect(inputOtp).toHaveJSProperty('value', '1234');
+      await expect(inputBoxes.nth(0)).toHaveValue('1');
+      await expect(inputBoxes.nth(1)).toHaveValue('2');
+      await expect(inputBoxes.nth(2)).toHaveValue('3');
+      await expect(inputBoxes.nth(3)).toHaveValue('4');
+    });
+
+    test('should update the 1st input value when typing in the 3rd box', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-input-otp>Description</ion-input-otp>
+      `,
+        config
+      );
+
+      const thirdInput = page.locator('ion-input-otp input').nth(2);
+      await thirdInput.focus();
+
+      const inputOtp = page.locator('ion-input-otp');
+      const inputBoxes = page.locator('ion-input-otp input');
+
+      await page.keyboard.type('1');
+
+      await expect(inputBoxes.nth(0)).toHaveValue('1');
+      await expect(inputBoxes.nth(1)).toHaveValue('');
+      await expect(inputBoxes.nth(2)).toHaveValue('');
+      await expect(inputBoxes.nth(3)).toHaveValue('');
+      await expect(inputOtp).toHaveJSProperty('value', '1');
+
+      // Focus should be on the 2nd input box
+      const secondInput = page.locator('ion-input-otp input').nth(1);
+      await expect(secondInput).toBeFocused();
+    });
+  });
+
   test.describe(title('input-otp: focus functionality'), () => {
     test('should focus the first input box when tabbed to', async ({ page }) => {
       await page.setContent(