fix(input-otp): correctly handle autofill by splitting the values into all inputs

Author: brandyscarney

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

@@ -619,6 +619,21 @@ export class InputOTP implements ComponentInterface {
 
     const value = (event.target as HTMLInputElement).value;
 
+    // If the value is longer than 1 character, it's likely from
+    // autofill, so we need to split the value up
+    if (value.length > 1) {
+      const chars = value.split('').slice(0, this.length);
+      chars.forEach((char, index) => {
+        if (this.validKeyPattern.test(char)) {
+          this.inputRefs[index].value = char;
+          this.inputValues[index] = char;
+        }
+      });
+      this.value = chars.join('');
+      this.updateValue(event);
+      return;
+    }
+
     // Only allow input if it's a single character and matches the pattern
     if (value.length > 1 || (value.length > 0 && !validKeyPattern.test(value))) {
       // Reset the input value if not valid
@@ -760,7 +775,7 @@ export class InputOTP implements ComponentInterface {
                   readOnly={readonly}
                   tabIndex={index === tabbableIndex ? 0 : -1}
                   value={inputValues[index] || ''}
-                  autocomplete={index === 0 ? 'one-time-code' : 'off'}
+                  autocomplete="one-time-code"
                   ref={(el) => (inputRefs[index] = el as HTMLInputElement)}
                   onInput={this.onInput(index)}
                   onBlur={this.onBlur}

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

@@ -429,6 +429,60 @@ configs({ modes: ['ios'] }).forEach(({ title, config }) => {
 
       await verifyInputValues(inputOtp, ['1', '9', '3', '']);
     });
+
+    test('should handle autofill correctly', async ({ page }) => {
+      await page.setContent(`<ion-input-otp>Description</ion-input-otp>`, config);
+
+      const firstInput = page.locator('ion-input-otp input').first();
+
+      // Set the value in the 1st input directly and trigger input event
+      // this simulates the value being set by autofill
+      await firstInput.evaluate((input) => {
+        (input as HTMLInputElement).value = '1234';
+        input.dispatchEvent(new Event('input', { bubbles: true }));
+      });
+
+      const inputOtp = page.locator('ion-input-otp');
+      await verifyInputValues(inputOtp, ['1', '2', '3', '4']);
+    });
+
+    test('should handle autofill correctly when it exceeds the length', async ({ page }) => {
+      await page.setContent(`<ion-input-otp>Description</ion-input-otp>`, config);
+
+      const firstInput = page.locator('ion-input-otp input').first();
+
+      // Set the value in the 1st input directly and trigger input event
+      // this simulates the value being set by autofill
+      await firstInput.evaluate((input) => {
+        (input as HTMLInputElement).value = '123456';
+        input.dispatchEvent(new Event('input', { bubbles: true }));
+      });
+
+      const inputOtp = page.locator('ion-input-otp');
+      await verifyInputValues(inputOtp, ['1', '2', '3', '4']);
+    });
+
+    test('should handle autofill correctly when using autofill after typing 1 character', 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();
+
+      await page.keyboard.type('9');
+
+      const secondInput = page.locator('ion-input-otp input').nth(1);
+      await secondInput.focus();
+
+      // Set the value in the 2nd input directly and trigger input event
+      // this simulates the value being set by autofill from the 2nd input
+      await secondInput.evaluate((input) => {
+        (input as HTMLInputElement).value = '1234';
+        input.dispatchEvent(new Event('input', { bubbles: true }));
+      });
+
+      const inputOtp = page.locator('ion-input-otp');
+      await verifyInputValues(inputOtp, ['1', '2', '3', '4']);
+    });
   });
 
   test.describe(title('input-otp: focus functionality'), () => {