fix(input-otp): do not shift values right if the input value is selected

Author: brandyscarney

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

@@ -412,11 +412,14 @@ export class InputOTP implements ComponentInterface {
   private onKeyDown = (index: number) => (event: KeyboardEvent) => {
     const { length } = this;
     const rtl = isRTL(this.el);
+    const input = event.target as HTMLInputElement;
 
-    // Do not process the paste shortcut to avoid changing
-    // the value to the letter "v" on paste
     const isPasteShortcut = (event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'v';
-    if (isPasteShortcut) {
+    const isTextSelection = input.selectionStart !== input.selectionEnd;
+
+    // Return if the key is the paste shortcut or the input value
+    // text is selected and let the onPaste / onInput handler manage it
+    if (isPasteShortcut || isTextSelection) {
       return;
     }
 

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

@@ -263,6 +263,30 @@ configs({ modes: ['ios'] }).forEach(({ title, config }) => {
       // Focus should remain on the 2nd input box
       await expect(inputBoxes.nth(1)).toBeFocused();
     });
+
+    test('should not shift values right when selecting the text in the 2nd input box', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-input-otp value="123">Description</ion-input-otp>
+      `,
+        config
+      );
+
+      const secondInput = page.locator('ion-input-otp input').nth(1);
+      await secondInput.focus();
+      await secondInput.selectText();
+
+      const inputOtp = page.locator('ion-input-otp');
+      const inputBoxes = page.locator('ion-input-otp input');
+
+      await page.keyboard.type('9');
+
+      await expect(inputBoxes.nth(0)).toHaveValue('1');
+      await expect(inputBoxes.nth(1)).toHaveValue('9');
+      await expect(inputBoxes.nth(2)).toHaveValue('3');
+      await expect(inputBoxes.nth(3)).toHaveValue('');
+      await expect(inputOtp).toHaveJSProperty('value', '193');
+    });
   });
 
   test.describe(title('input-otp: focus functionality'), () => {