Merge pull request #63 from sarinaa-m/non-English-char-number-in-ios-device

fix: enhance OTP input handling for iOS and improve focus behavior

Author: ejirocodes

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)) ||

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) {