diff --git a/core/src/components/input-otp/input-otp.tsx b/core/src/components/input-otp/input-otp.tsx index a93eabd926d..2270ca6407d 100644 --- a/core/src/components/input-otp/input-otp.tsx +++ b/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(); 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 index 2067a000209..1f4d72daa71 100644 --- a/core/src/components/input-otp/test/basic/input-otp.e2e.ts +++ b/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(`Description`, 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, }) => {