fix(input-otp): prevent deletion when readonly is true

Author: KanhaiyaPandey

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,6 +610,11 @@ export class InputOTP implements ComponentInterface {
    * 5. Single character replacement
    */
   private onInput = (index: number) => (event: InputEvent) => {
+    if (this.readonly) {
+      event.preventDefault();
+      return;
+    }
+
     const { length, validKeyPattern } = this;
     const input = event.target as HTMLInputElement;
     const value = input.value;
@@ -735,6 +747,11 @@ export class InputOTP implements ComponentInterface {
    * the next empty input after pasting.
    */
   private onPaste = (event: ClipboardEvent) => {
+    if (this.readonly) {
+      event.preventDefault();
+      return;
+    }
+
     const { inputRefs, length, validKeyPattern } = this;
 
     event.preventDefault();

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

@@ -690,6 +690,21 @@ configs({ modes: ['ios'] }).forEach(({ title, config }) => {
   });
 
   test.describe(title('input-otp: backspace functionality'), () => {
+    test('should not modify values with Backspace or Delete when readonly', 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('should backspace the first input box when backspace is pressed twice from the 2nd input box and the first input box has a value', async ({
       page,
     }) => {