From ef1ea18a2f33c62837affaf13c04d9a868528eca Mon Sep 17 00:00:00 2001
From: "sarina.m" <sarina.m@sarinams-MacBook-Air.local>
Date: Thu, 15 May 2025 22:27:49 +0330
Subject: [PATCH 1/3] fix: enhance OTP input handling for iOS and improve focus
 behavior

---
 src/components/single-otp-input.vue | 40 ++++++++++++++-----------
 src/components/vue3-otp-input.vue   | 45 ++++++++++++++++-------------
 2 files changed, 48 insertions(+), 37 deletions(-)

diff --git a/src/components/single-otp-input.vue b/src/components/single-otp-input.vue
index a45f35a..881706e 100644
--- a/src/components/single-otp-input.vue
+++ b/src/components/single-otp-input.vue
@@ -69,23 +69,29 @@ const isCodeNumeric = (charCode: number) =>
   (charCode >= 48 && charCode <= 57) || (charCode >= 96 && charCode <= 105);
 // numeric keys and numpad keys
 
-const handleOnKeyDown = (event: KeyboardEvent) => {
-  if (props.isDisabled) {
-    event.preventDefault();
-  }
-  // 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;
-  if (
-    isCodeNumeric(charCode) ||
-    (props.inputType === "letter-numeric" && isCodeLetter(charCode)) ||
-    [8, 9, 13, 37, 39, 46, 86].includes(charCode)
-  ) {
-    emit("on-keydown", event);
-  } else {
-    keyEvent.preventDefault();
-  }
-};
+  const handleOnKeyDown = (event: KeyboardEvent) => {
+    if (props.isDisabled) {
+      event.preventDefault();
+    }
+    // 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)) ||
+      [8, 9, 13, 37, 39, 46, 86].includes(charCode)
+    ) {
+      emit('on-keydown', event);
+    } else {
+      keyEvent.preventDefault();
+    }
+  };
 
 const handleOnPaste = (event: ClipboardEvent) => emit("on-paste", event);
 
diff --git a/src/components/vue3-otp-input.vue b/src/components/vue3-otp-input.vue
index 2ea098b..e83ced3 100644
--- a/src/components/vue3-otp-input.vue
+++ b/src/components/vue3-otp-input.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
-import { ref, watch } from "vue";
-import SingleOtpInput from "./single-otp-input.vue";
+  import { ref, watch } from 'vue';
 
 // keyCode constants
 const BACKSPACE = 8;
@@ -64,12 +63,15 @@ watch(
   { immediate: true }
 );
 
-const handleOnFocus = (index: number) => {
-  activeInput.value = index;
-};
-const handleOnBlur = () => {
-  activeInput.value = -1;
-};
+  const handleOnFocus = (index: number) => {
+    activeInput.value = index;
+  };
+  const handleOnBlur = () => {
+    // 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
 const checkFilledAllInputs = () => {
@@ -135,18 +137,21 @@ const handleOnPaste = (event: any) => {
   return checkFilledAllInputs();
 };
 
-const handleOnChange = (value: number | string) => {
-  changeCodeAtFocus(value);
-  focusNextInput();
-};
-const clearInput = () => {
-  if (otp.value.length > 0) {
-    emit("update:value", "");
-    emit("on-change", "");
-  }
-  otp.value = [];
-  activeInput.value = 0;
-};
+  const handleOnChange = (value: number | string) => {
+    changeCodeAtFocus(value);
+    // 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) {
+      emit('update:value', '');
+      emit('on-change', '');
+    }
+    otp.value = [];
+    activeInput.value = 0;
+  };
 
 const fillInput = (value: string) => {
   const fill = value.split("");

From 45f061e301011f7d71552c9b88498df489752814 Mon Sep 17 00:00:00 2001
From: "sarina.m" <sarina.m@sarinams-MacBook-Air.local>
Date: Sat, 17 May 2025 10:25:30 +0330
Subject: [PATCH 2/3] fix: standardize quotation marks and improve code
 formatting in OTP input component

---
 src/components/vue3-otp-input.vue | 127 +++++++++++++++---------------
 1 file changed, 64 insertions(+), 63 deletions(-)

diff --git a/src/components/vue3-otp-input.vue b/src/components/vue3-otp-input.vue
index e83ced3..a3b5da3 100644
--- a/src/components/vue3-otp-input.vue
+++ b/src/components/vue3-otp-input.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-  import { ref, watch } from 'vue';
+import { ref, watch } from 'vue';
+import SingleOtpInput from './single-otp-input.vue';
 
 // keyCode constants
 const BACKSPACE = 8;
@@ -13,16 +14,16 @@ type Props = {
   separator?: string;
   inputClasses?: string | string[];
   conditionalClass?: string[];
-  inputType?: "number" | "tel" | "letter-numeric" | "password";
+  inputType?: 'number' | 'tel' | 'letter-numeric' | 'password';
   inputmode?:
-    | "none"
-    | "text"
-    | "tel"
-    | "url"
-    | "email"
-    | "numeric"
-    | "decimal"
-    | "search";
+    | 'none'
+    | 'text'
+    | 'tel'
+    | 'url'
+    | 'email'
+    | 'numeric'
+    | 'decimal'
+    | 'search';
   shouldAutoFocus?: boolean;
   placeholder?: string[];
   isDisabled?: boolean;
@@ -30,11 +31,11 @@ type Props = {
 };
 
 const props = withDefaults(defineProps<Props>(), {
-  value: "",
+  value: '',
   numInputs: 4,
-  separator: "",
-  inputClasses: "",
-  inputmode: "text",
+  separator: '',
+  inputClasses: '',
+  inputmode: 'text',
   shouldAutoFocus: false,
   isDisabled: false,
   placeholder: () => [],
@@ -42,9 +43,9 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const emit = defineEmits<{
-  (e: "update:value", value: string): void;
-  (e: "on-change", value: string): void;
-  (e: "on-complete", value: string): void;
+  (e: 'update:value', value: string): void;
+  (e: 'on-change', value: string): void;
+  (e: 'on-complete', value: string): void;
 }>();
 
 const activeInput = ref<number>(0);
@@ -56,30 +57,30 @@ watch(
   (val) => {
     // fix issue: https://github.com/ejirocodes/vue3-otp-input/issues/34
     if (val.length === props.numInputs || otp.value.length === 0) {
-      const fill = val.split("");
+      const fill = val.split('');
       otp.value = fill;
     }
   },
   { immediate: true }
 );
 
-  const handleOnFocus = (index: number) => {
-    activeInput.value = index;
-  };
-  const handleOnBlur = () => {
-    // Don't reset activeInput if we're at the last input
-    if (activeInput.value !== props.numInputs - 1) {
-      activeInput.value = -1;
-    }
-  };
+const handleOnFocus = (index: number) => {
+  activeInput.value = index;
+};
+const handleOnBlur = () => {
+  // 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
 const checkFilledAllInputs = () => {
-  if (otp.value.join("").length === props.numInputs) {
-    emit("update:value", otp.value.join(""));
-    return emit("on-complete", otp.value.join(""));
+  if (otp.value.join('').length === props.numInputs) {
+    emit('update:value', otp.value.join(''));
+    return emit('on-complete', otp.value.join(''));
   }
-  return "Wait until the user enters the required number of characters";
+  return 'Wait until the user enters the required number of characters';
 };
 
 // Focus on input by index
@@ -101,9 +102,9 @@ const changeCodeAtFocus = (value: number | string) => {
 
   otp.value[activeInput.value] = value.toString();
 
-  if (oldOtp.value.join("") !== otp.value.join("")) {
-    emit("update:value", otp.value.join(""));
-    emit("on-change", otp.value.join(""));
+  if (oldOtp.value.join('') !== otp.value.join('')) {
+    emit('update:value', otp.value.join(''));
+    emit('on-change', otp.value.join(''));
     checkFilledAllInputs();
   }
 };
@@ -112,18 +113,18 @@ const changeCodeAtFocus = (value: number | string) => {
 const handleOnPaste = (event: any) => {
   event.preventDefault();
   const pastedData = event.clipboardData
-    .getData("text/plain")
+    .getData('text/plain')
     .slice(0, props.numInputs - activeInput.value)
-    .split("");
-  if (props.inputType === "number" && !pastedData.join("").match(/^\d+$/)) {
-    return "Invalid pasted data";
+    .split('');
+  if (props.inputType === 'number' && !pastedData.join('').match(/^\d+$/)) {
+    return 'Invalid pasted data';
   }
 
   if (
-    props.inputType === "letter-numeric" &&
-    !pastedData.join("").match(/^\w+$/)
+    props.inputType === 'letter-numeric' &&
+    !pastedData.join('').match(/^\w+$/)
   ) {
-    return "Invalid pasted data";
+    return 'Invalid pasted data';
   }
   // Paste data from focused input onwards
   const currentCharsInOtp = otp.value.slice(0, activeInput.value);
@@ -137,28 +138,28 @@ const handleOnPaste = (event: any) => {
   return checkFilledAllInputs();
 };
 
-  const handleOnChange = (value: number | string) => {
-    changeCodeAtFocus(value);
-    // 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) {
-      emit('update:value', '');
-      emit('on-change', '');
-    }
-    otp.value = [];
-    activeInput.value = 0;
-  };
+const handleOnChange = (value: number | string) => {
+  changeCodeAtFocus(value);
+  // 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) {
+    emit('update:value', '');
+    emit('on-change', '');
+  }
+  otp.value = [];
+  activeInput.value = 0;
+};
 
 const fillInput = (value: string) => {
-  const fill = value.split("");
+  const fill = value.split('');
   if (fill.length === props.numInputs) {
     otp.value = fill;
-    emit("update:value", otp.value.join(""));
-    emit("on-complete", otp.value.join(""));
+    emit('update:value', otp.value.join(''));
+    emit('on-complete', otp.value.join(''));
   }
 };
 
@@ -167,12 +168,12 @@ const handleOnKeyDown = (event: KeyboardEvent, index: number) => {
   switch (event.keyCode) {
     case BACKSPACE:
       event.preventDefault();
-      changeCodeAtFocus("");
+      changeCodeAtFocus('');
       focusPrevInput();
       break;
     case DELETE:
       event.preventDefault();
-      changeCodeAtFocus("");
+      changeCodeAtFocus('');
       break;
     case LEFT_ARROW:
       event.preventDefault();
@@ -200,10 +201,10 @@ const handleOnKeyDown = (event: KeyboardEvent, index: number) => {
 const focusOrder = (currentIndex: number) => {
   if (props.shouldFocusOrder) {
     setTimeout(() => {
-      const len = otp.value.join("").length;
+      const len = otp.value.join('').length;
       if (currentIndex - len >= 0) {
         activeInput.value = len;
-        otp.value[currentIndex] = "";
+        otp.value[currentIndex] = '';
       }
     }, 100);
   }

From 70be99ae40c85844b0ebe7fc9e305cd2e8f642f7 Mon Sep 17 00:00:00 2001
From: "sarina.m" <sarina.m@sarinams-MacBook-Air.local>
Date: Sat, 17 May 2025 12:46:12 +0330
Subject: [PATCH 3/3] fix: standardize quotation marks and improve formatting
 in OTP input components

---
 src/components/single-otp-input.vue | 44 +++++++--------
 src/components/vue3-otp-input.vue   | 84 ++++++++++++++---------------
 2 files changed, 64 insertions(+), 64 deletions(-)

diff --git a/src/components/single-otp-input.vue b/src/components/single-otp-input.vue
index 881706e..04ef15e 100644
--- a/src/components/single-otp-input.vue
+++ b/src/components/single-otp-input.vue
@@ -69,29 +69,29 @@ const isCodeNumeric = (charCode: number) =>
   (charCode >= 48 && charCode <= 57) || (charCode >= 96 && charCode <= 105);
 // numeric keys and numpad keys
 
-  const handleOnKeyDown = (event: KeyboardEvent) => {
-    if (props.isDisabled) {
-      event.preventDefault();
-    }
-    // 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;
-    }
+const handleOnKeyDown = (event: KeyboardEvent) => {
+  if (props.isDisabled) {
+    event.preventDefault();
+  }
+  // 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)) ||
-      [8, 9, 13, 37, 39, 46, 86].includes(charCode)
-    ) {
-      emit('on-keydown', event);
-    } else {
-      keyEvent.preventDefault();
-    }
-  };
+  if (
+    isCodeNumeric(charCode) ||
+    (props.inputType === "letter-numeric" && isCodeLetter(charCode)) ||
+    [8, 9, 13, 37, 39, 46, 86].includes(charCode)
+  ) {
+    emit("on-keydown", event);
+  } else {
+    keyEvent.preventDefault();
+  }
+};
 
 const handleOnPaste = (event: ClipboardEvent) => emit("on-paste", event);
 
diff --git a/src/components/vue3-otp-input.vue b/src/components/vue3-otp-input.vue
index a3b5da3..9d1e4d6 100644
--- a/src/components/vue3-otp-input.vue
+++ b/src/components/vue3-otp-input.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { ref, watch } from 'vue';
-import SingleOtpInput from './single-otp-input.vue';
+import { ref, watch } from "vue";
+import SingleOtpInput from "./single-otp-input.vue";
 
 // keyCode constants
 const BACKSPACE = 8;
@@ -14,16 +14,16 @@ type Props = {
   separator?: string;
   inputClasses?: string | string[];
   conditionalClass?: string[];
-  inputType?: 'number' | 'tel' | 'letter-numeric' | 'password';
+  inputType?: "number" | "tel" | "letter-numeric" | "password";
   inputmode?:
-    | 'none'
-    | 'text'
-    | 'tel'
-    | 'url'
-    | 'email'
-    | 'numeric'
-    | 'decimal'
-    | 'search';
+    | "none"
+    | "text"
+    | "tel"
+    | "url"
+    | "email"
+    | "numeric"
+    | "decimal"
+    | "search";
   shouldAutoFocus?: boolean;
   placeholder?: string[];
   isDisabled?: boolean;
@@ -31,11 +31,11 @@ type Props = {
 };
 
 const props = withDefaults(defineProps<Props>(), {
-  value: '',
+  value: "",
   numInputs: 4,
-  separator: '',
-  inputClasses: '',
-  inputmode: 'text',
+  separator: "",
+  inputClasses: "",
+  inputmode: "text",
   shouldAutoFocus: false,
   isDisabled: false,
   placeholder: () => [],
@@ -43,9 +43,9 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const emit = defineEmits<{
-  (e: 'update:value', value: string): void;
-  (e: 'on-change', value: string): void;
-  (e: 'on-complete', value: string): void;
+  (e: "update:value", value: string): void;
+  (e: "on-change", value: string): void;
+  (e: "on-complete", value: string): void;
 }>();
 
 const activeInput = ref<number>(0);
@@ -57,7 +57,7 @@ watch(
   (val) => {
     // fix issue: https://github.com/ejirocodes/vue3-otp-input/issues/34
     if (val.length === props.numInputs || otp.value.length === 0) {
-      const fill = val.split('');
+      const fill = val.split("");
       otp.value = fill;
     }
   },
@@ -76,11 +76,11 @@ const handleOnBlur = () => {
 
 // Helper to return OTP from input
 const checkFilledAllInputs = () => {
-  if (otp.value.join('').length === props.numInputs) {
-    emit('update:value', otp.value.join(''));
-    return emit('on-complete', otp.value.join(''));
+  if (otp.value.join("").length === props.numInputs) {
+    emit("update:value", otp.value.join(""));
+    return emit("on-complete", otp.value.join(""));
   }
-  return 'Wait until the user enters the required number of characters';
+  return "Wait until the user enters the required number of characters";
 };
 
 // Focus on input by index
@@ -102,9 +102,9 @@ const changeCodeAtFocus = (value: number | string) => {
 
   otp.value[activeInput.value] = value.toString();
 
-  if (oldOtp.value.join('') !== otp.value.join('')) {
-    emit('update:value', otp.value.join(''));
-    emit('on-change', otp.value.join(''));
+  if (oldOtp.value.join("") !== otp.value.join("")) {
+    emit("update:value", otp.value.join(""));
+    emit("on-change", otp.value.join(""));
     checkFilledAllInputs();
   }
 };
@@ -113,18 +113,18 @@ const changeCodeAtFocus = (value: number | string) => {
 const handleOnPaste = (event: any) => {
   event.preventDefault();
   const pastedData = event.clipboardData
-    .getData('text/plain')
+    .getData("text/plain")
     .slice(0, props.numInputs - activeInput.value)
-    .split('');
-  if (props.inputType === 'number' && !pastedData.join('').match(/^\d+$/)) {
-    return 'Invalid pasted data';
+    .split("");
+  if (props.inputType === "number" && !pastedData.join("").match(/^\d+$/)) {
+    return "Invalid pasted data";
   }
 
   if (
-    props.inputType === 'letter-numeric' &&
-    !pastedData.join('').match(/^\w+$/)
+    props.inputType === "letter-numeric" &&
+    !pastedData.join("").match(/^\w+$/)
   ) {
-    return 'Invalid pasted data';
+    return "Invalid pasted data";
   }
   // Paste data from focused input onwards
   const currentCharsInOtp = otp.value.slice(0, activeInput.value);
@@ -147,19 +147,19 @@ const handleOnChange = (value: number | string) => {
 };
 const clearInput = () => {
   if (otp.value.length > 0) {
-    emit('update:value', '');
-    emit('on-change', '');
+    emit("update:value", "");
+    emit("on-change", "");
   }
   otp.value = [];
   activeInput.value = 0;
 };
 
 const fillInput = (value: string) => {
-  const fill = value.split('');
+  const fill = value.split("");
   if (fill.length === props.numInputs) {
     otp.value = fill;
-    emit('update:value', otp.value.join(''));
-    emit('on-complete', otp.value.join(''));
+    emit("update:value", otp.value.join(""));
+    emit("on-complete", otp.value.join(""));
   }
 };
 
@@ -168,12 +168,12 @@ const handleOnKeyDown = (event: KeyboardEvent, index: number) => {
   switch (event.keyCode) {
     case BACKSPACE:
       event.preventDefault();
-      changeCodeAtFocus('');
+      changeCodeAtFocus("");
       focusPrevInput();
       break;
     case DELETE:
       event.preventDefault();
-      changeCodeAtFocus('');
+      changeCodeAtFocus("");
       break;
     case LEFT_ARROW:
       event.preventDefault();
@@ -201,10 +201,10 @@ const handleOnKeyDown = (event: KeyboardEvent, index: number) => {
 const focusOrder = (currentIndex: number) => {
   if (props.shouldFocusOrder) {
     setTimeout(() => {
-      const len = otp.value.join('').length;
+      const len = otp.value.join("").length;
       if (currentIndex - len >= 0) {
         activeInput.value = len;
-        otp.value[currentIndex] = '';
+        otp.value[currentIndex] = "";
       }
     }, 100);
   }