diff --git a/src/components/single-otp-input.vue b/src/components/single-otp-input.vue index a45f35a..04ef15e 100644 --- a/src/components/single-otp-input.vue +++ b/src/components/single-otp-input.vue @@ -76,6 +76,12 @@ const handleOnKeyDown = (event: KeyboardEvent) => { // Only allow characters 0-9, DEL, Backspace, Enter, Right and Left Arrows, and Pasting const keyEvent = event || window.event; const charCode = keyEvent.which ? keyEvent.which : keyEvent.keyCode; + // Allow any input on iOS + if (/iPhone|iPad|iPod/.test(navigator.userAgent)) { + emit("on-keydown", event); + return; + } + if ( isCodeNumeric(charCode) || (props.inputType === "letter-numeric" && isCodeLetter(charCode)) || diff --git a/src/components/vue3-otp-input.vue b/src/components/vue3-otp-input.vue index 2ea098b..9d1e4d6 100644 --- a/src/components/vue3-otp-input.vue +++ b/src/components/vue3-otp-input.vue @@ -68,7 +68,10 @@ const handleOnFocus = (index: number) => { activeInput.value = index; }; const handleOnBlur = () => { - activeInput.value = -1; + // Don't reset activeInput if we're at the last input + if (activeInput.value !== props.numInputs - 1) { + activeInput.value = -1; + } }; // Helper to return OTP from input @@ -137,7 +140,10 @@ const handleOnPaste = (event: any) => { const handleOnChange = (value: number | string) => { changeCodeAtFocus(value); - focusNextInput(); + // Only move to next input if we're not at the last input + if (activeInput.value < props.numInputs - 1) { + focusNextInput(); + } }; const clearInput = () => { if (otp.value.length > 0) {