fix(input-otp): prevent deletion and paste when disabled or readonly (#30983)

KanhaiyaPandey · brandyscarney · web-flow · commit 81aa977fde48 · 2026-03-25T19:56:46.000Z
Closes #30913 ## Description When `ion-input-otp` has the `readonly` prop set, typing is correctly blocked but users are still able to delete characters using the Backspace or Delete keys. When `disabled` or `readonly` are set, users are still able to paste into the component. ## Changes - Added guard for `disabled` and `readonly` inside `onInput` and `onPaste` handler - Prevented default behavior for `Backspace` and `Delete` when `readonly` is `true` - Return in `onKeydown` when `disabled` is `true` - Added e2e tests verifying the behavior ## How to Test 1. Add `readonly` to `ion-input-otp` 2. Attempt to type → no input allowed 3. Press Backspace/Delete → no characters removed Behavior now matches expected readonly semantics. --------- Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
diff --git a/core/src/components/input-otp/input-otp.tsx b/core/src/components/input-otp/input-otp.tsx
@@ -535,10 +535,21 @@ export class InputOTP implements ComponentInterface {
    * - Tab: Allows normal tab navigation between components
    */
   private onKeyDown = (index: number) => (event: KeyboardEvent) => {
-    const { length } = this;
+    const { disabled, length, readonly } = this;
     const rtl = isRTL(this.el);
     const input = event.target as HTMLInputElement;
 
+    if (disabled) {
+      return;
+    }
+
+    if (readonly) {
+      if (event.key === 'Backspace' || event.key === 'Delete') {
+        event.preventDefault();
+        return;
+      }
+    }
+
     // Meta shortcuts are used to copy, paste, and select text
     // We don't want to handle these keys here
     const metaShortcuts = ['a', 'c', 'v', 'x', 'r', 'z', 'y'];
@@ -603,11 +614,15 @@ export class InputOTP implements ComponentInterface {
    * 5. Single character replacement
    */
   private onInput = (index: number) => (event: InputEvent) => {
-    const { length, validKeyPattern } = this;
+    const { disabled, length, readonly, validKeyPattern } = this;
     const input = event.target as HTMLInputElement;
     const value = input.value;
     const previousValue = this.previousInputValues[index] || '';
 
+    if (disabled || readonly) {
+      return;
+    }
+
     // 1. Autofill handling
     // If the length of the value increases by more than 1 from the previous
     // value, treat this as autofill. This is to prevent the case where the
@@ -735,10 +750,14 @@ export class InputOTP implements ComponentInterface {
    * the next empty input after pasting.
    */
   private onPaste = (event: ClipboardEvent) => {
-    const { inputRefs, length, validKeyPattern } = this;
+    const { disabled, inputRefs, length, readonly, validKeyPattern } = this;
 
     event.preventDefault();
 
+    if (disabled || readonly) {
+      return;
+    }
+
     const pastedText = event.clipboardData?.getData('text');
 
     // If there is no pasted text, still emit the input change event
diff --git a/core/src/components/input-otp/test/basic/input-otp.e2e.ts b/core/src/components/input-otp/test/basic/input-otp.e2e.ts
@@ -687,6 +687,31 @@ configs({ modes: ['ios'] }).forEach(({ title, config }) => {
       const firstInput = page.locator('ion-input-otp input').first();
       await expect(firstInput).toBeFocused();
     });
+
+    test('should allow arrow key navigation when readonly is true', async ({ page }) => {
+      await page.setContent(`<ion-input-otp value="1234" readonly>Description</ion-input-otp>`, config);
+
+      const inputOtp = page.locator('ion-input-otp');
+      const inputBoxes = page.locator('ion-input-otp input');
+      await inputBoxes.nth(1).focus();
+
+      const isRTL = await page.evaluate(() => document.dir === 'rtl');
+      if (isRTL) {
+        await page.keyboard.press('ArrowLeft');
+        await expect(inputBoxes.nth(2)).toBeFocused();
+
+        await page.keyboard.press('ArrowRight');
+        await expect(inputBoxes.nth(1)).toBeFocused();
+      } else {
+        await page.keyboard.press('ArrowRight');
+        await expect(inputBoxes.nth(2)).toBeFocused();
+
+        await page.keyboard.press('ArrowLeft');
+        await expect(inputBoxes.nth(1)).toBeFocused();
+      }
+
+      await verifyInputValues(inputOtp, ['1', '2', '3', '4']);
+    });
   });
 
   test.describe(title('input-otp: backspace functionality'), () => {
@@ -737,6 +762,21 @@ configs({ modes: ['ios'] }).forEach(({ title, config }) => {
       const inputOtp = page.locator('ion-input-otp');
       await verifyInputValues(inputOtp, ['1', '3', '', '']);
     });
+
+    test('should not modify values with backspace or delete when readonly is true', async ({ page }) => {
+      await page.setContent(`<ion-input-otp value="1234" readonly>Description</ion-input-otp>`, config);
+
+      const inputOtp = page.locator('ion-input-otp');
+      const ionInput = await page.spyOnEvent('ionInput');
+
+      await page.keyboard.press('Tab');
+      await page.keyboard.press('Backspace');
+      await page.keyboard.press('Delete');
+      await page.keyboard.type('5');
+
+      await verifyInputValues(inputOtp, ['1', '2', '3', '4']);
+      await expect(ionInput).not.toHaveReceivedEvent();
+    });
   });
 
   test.describe(title('input-otp: paste functionality'), () => {
@@ -828,6 +868,28 @@ configs({ modes: ['ios'] }).forEach(({ title, config }) => {
 
       await verifyInputValues(inputOtp, ['أ', 'ب', 'ج', 'د', '1', '2']);
     });
+
+    test('should not paste text when disabled is true', async ({ page }) => {
+      await page.setContent(`<ion-input-otp value="1234" disabled>Description</ion-input-otp>`, config);
+
+      const firstInput = page.locator('ion-input-otp input').first();
+      await firstInput.focus();
+      await simulatePaste(firstInput, '5678');
+
+      const inputOtp = page.locator('ion-input-otp');
+      await verifyInputValues(inputOtp, ['1', '2', '3', '4']);
+    });
+
+    test('should not paste text when readonly is true', async ({ page }) => {
+      await page.setContent(`<ion-input-otp value="1234" readonly>Description</ion-input-otp>`, config);
+
+      const firstInput = page.locator('ion-input-otp input').first();
+      await firstInput.focus();
+      await simulatePaste(firstInput, '5678');
+
+      const inputOtp = page.locator('ion-input-otp');
+      await verifyInputValues(inputOtp, ['1', '2', '3', '4']);
+    });
   });
 });
 
