fix(input-otp): correct paste behavior to always start at first box

Author: brandyscarney

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

@@ -551,24 +551,21 @@ export class InputOTP implements ComponentInterface {
       .filter((char) => validKeyPattern.test(char))
       .slice(0, length);
 
-    // Find the first empty input
-    const startIndex = this.getFirstEmptyIndex();
-    // If all boxes are filled, start at 0
-    const pasteStart = startIndex === -1 ? 0 : startIndex;
-
+    // Always paste starting at the first box
     validChars.forEach((char, index) => {
-      const targetIndex = pasteStart + index;
-      if (targetIndex < length) {
-        this.inputRefs[targetIndex].value = char;
-        this.inputValues[targetIndex] = char;
+      if (index < length) {
+        this.inputRefs[index].value = char;
+        this.inputValues[index] = char;
       }
     });
 
+    // Update the value so that all input boxes are updated
+    this.value = validChars.join('');
     this.updateValue(event);
 
     // Focus the next empty input after pasting
     // If all boxes are filled, focus the last input
-    const nextEmptyIndex = pasteStart + validChars.length;
+    const nextEmptyIndex = validChars.length;
     if (nextEmptyIndex < length) {
       inputRefs[nextEmptyIndex]?.focus();
     } else {

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

@@ -587,7 +587,7 @@ configs({ modes: ['ios'] }).forEach(({ title, config }) => {
       await expect(inputBoxes.nth(2)).toBeFocused();
     });
 
-    test('should paste text into the last two input boxes when pasting 2 digits after typing 2 digits', async ({
+    test('should paste text into the first two input boxes when pasting 2 digits after typing 2 digits', async ({
       page,
     }) => {
       await page.setContent(`<ion-input-otp>Description</ion-input-otp>`, config);
@@ -599,7 +599,7 @@ configs({ modes: ['ios'] }).forEach(({ title, config }) => {
 
       const inputOtp = page.locator('ion-input-otp');
 
-      await verifyInputValues(inputOtp, ['1', '2', '3', '4']);
+      await verifyInputValues(inputOtp, ['3', '4', '', '']);
     });
 
     test('should paste text into all input boxes when pasting 4 digits after typing 4 digits', async ({ page }) => {