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

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

@@ -535,10 +535,17 @@ export class InputOTP implements ComponentInterface {
    * - Tab: Allows normal tab navigation between components
    */
   private onKeyDown = (index: number) => (event: KeyboardEvent) => {
-    const { length } = this;
+    const { length, readonly } = this;
     const rtl = isRTL(this.el);
     const input = event.target as HTMLInputElement;
 
+    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 +610,16 @@ export class InputOTP implements ComponentInterface {
    * 5. Single character replacement
    */
   private onInput = (index: number) => (event: InputEvent) => {
-    const { length, validKeyPattern } = this;
+    const { length, readonly, validKeyPattern } = this;
     const input = event.target as HTMLInputElement;
     const value = input.value;
     const previousValue = this.previousInputValues[index] || '';
 
+    if (readonly) {
+      event.preventDefault();
+      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 +747,14 @@ export class InputOTP implements ComponentInterface {
    * the next empty input after pasting.
    */
   private onPaste = (event: ClipboardEvent) => {
-    const { inputRefs, length, validKeyPattern } = this;
+    const { inputRefs, length, readonly, validKeyPattern } = this;
 
     event.preventDefault();
 
+    if (readonly) {
+      return;
+    }
+
     const pastedText = event.clipboardData?.getData('text');
 
     // If there is no pasted text, still emit the input change event

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,17 @@ configs({ modes: ['ios'] }).forEach(({ title, config }) => {
 
       await verifyInputValues(inputOtp, ['أ', 'ب', 'ج', 'د', '1', '2']);
     });
+
+    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']);
+    });
   });
 });