fix(input-otp): move focus to last input when all are filled

Author: brandyscarney

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

@@ -266,9 +266,12 @@ export class InputOTP implements ComponentInterface {
     this.updateValue();
 
     // Focus the next empty input after pasting
+    // If all boxes are filled, focus the last input
     const nextEmptyIndex = pasteStart + validChars.length;
     if (nextEmptyIndex < length) {
       inputRefs[nextEmptyIndex]?.focus();
+    } else {
+      inputRefs[length - 1]?.focus();
     }
   }
 
@@ -377,8 +380,21 @@ export class InputOTP implements ComponentInterface {
   }
 
   render() {
-    const { color, disabled, fill, hasFocus, inputId, inputRefs, inputValues, length, pattern, readonly, shape, size, type } =
-      this;
+    const {
+      color,
+      disabled,
+      fill,
+      hasFocus,
+      inputId,
+      inputRefs,
+      inputValues,
+      length,
+      pattern,
+      readonly,
+      shape,
+      size,
+      type,
+    } = this;
     const mode = getIonMode(this);
     const inputmode = this.getInputmode();
     const tabbableIndex = this.getTabbableIndex();

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

@@ -220,18 +220,15 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
 
   test.describe(title('input-otp: paste functionality'), () => {
     test('should paste text into the first and second input box when pasting 2 digits', async ({ page }) => {
-      await page.setContent(
-        `<ion-input-otp>Description</ion-input-otp>`,
-        config
-      );
+      await page.setContent(`<ion-input-otp>Description</ion-input-otp>`, config);
 
       const firstInput = page.locator('ion-input-otp input').first();
       await firstInput.focus();
       await firstInput.evaluate((input, value) => {
         const event = new ClipboardEvent('paste', {
           bubbles: true,
           cancelable: true,
-          clipboardData: new DataTransfer()
+          clipboardData: new DataTransfer(),
         });
         if (event.clipboardData) {
           event.clipboardData.setData('text', value);
@@ -244,21 +241,21 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       await expect(inputBoxes.nth(1)).toHaveValue('2');
       await expect(inputBoxes.nth(2)).toHaveValue('');
       await expect(inputBoxes.nth(3)).toHaveValue('');
+
+      // Focus should be on the 3rd input box
+      await expect(inputBoxes.nth(2)).toBeFocused();
     });
 
     test('should paste text into all input boxes when pasting 4 digits', async ({ page }) => {
-      await page.setContent(
-        `<ion-input-otp>Description</ion-input-otp>`,
-        config
-      );
+      await page.setContent(`<ion-input-otp>Description</ion-input-otp>`, config);
 
       const firstInput = page.locator('ion-input-otp input').first();
       await firstInput.focus();
       await firstInput.evaluate((input, value) => {
         const event = new ClipboardEvent('paste', {
           bubbles: true,
           cancelable: true,
-          clipboardData: new DataTransfer()
+          clipboardData: new DataTransfer(),
         });
         if (event.clipboardData) {
           event.clipboardData.setData('text', value);
@@ -271,21 +268,23 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       await expect(inputBoxes.nth(1)).toHaveValue('2');
       await expect(inputBoxes.nth(2)).toHaveValue('3');
       await expect(inputBoxes.nth(3)).toHaveValue('4');
+
+      // Focus should be on the 4th input box
+      await expect(inputBoxes.nth(3)).toBeFocused();
     });
 
-    test('should paste text into the first and second input box when pasting 2 digits in the 3rd box', async ({ page }) => {
-      await page.setContent(
-        `<ion-input-otp>Description</ion-input-otp>`,
-        config
-      );
+    test('should paste text into the first and second input box when pasting 2 digits 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();
       await thirdInput.evaluate((input, value) => {
         const event = new ClipboardEvent('paste', {
           bubbles: true,
           cancelable: true,
-          clipboardData: new DataTransfer()
+          clipboardData: new DataTransfer(),
         });
         if (event.clipboardData) {
           event.clipboardData.setData('text', value);
@@ -300,11 +299,10 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       await expect(inputBoxes.nth(3)).toHaveValue('');
     });
 
-    test('should paste text into the last two input boxes when pasting 2 digits after typing 2 digits', async ({ page }) => {
-      await page.setContent(
-        `<ion-input-otp>Description</ion-input-otp>`,
-        config
-      );
+    test('should paste text into the last two input boxes when pasting 2 digits after typing 2 digits', 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();
@@ -315,7 +313,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         const event = new ClipboardEvent('paste', {
           bubbles: true,
           cancelable: true,
-          clipboardData: new DataTransfer()
+          clipboardData: new DataTransfer(),
         });
         if (event.clipboardData) {
           event.clipboardData.setData('text', value);
@@ -331,10 +329,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
     });
 
     test('should paste text into all input boxes when pasting 4 digits after typing 4 digits', async ({ page }) => {
-      await page.setContent(
-        `<ion-input-otp>Description</ion-input-otp>`,
-        config
-      );
+      await page.setContent(`<ion-input-otp>Description</ion-input-otp>`, config);
 
       const firstInput = page.locator('ion-input-otp input').first();
       await firstInput.focus();
@@ -345,7 +340,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         const event = new ClipboardEvent('paste', {
           bubbles: true,
           cancelable: true,
-          clipboardData: new DataTransfer()
+          clipboardData: new DataTransfer(),
         });
         if (event.clipboardData) {
           event.clipboardData.setData('text', value);