From 0db1935faca24c7f5a25bd9e74bc8fe52171dec7 Mon Sep 17 00:00:00 2001
From: Konstantin Kozlov <k0stia.kozlov@yandex.ru>
Date: Wed, 2 Oct 2024 15:10:49 +0300
Subject: [PATCH] feature fix wrong position of the focused input

---
 src/index.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/index.tsx b/src/index.tsx
index 3afd218a..9c385632 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -68,6 +68,9 @@ const OTPInput = ({
   skipDefaultStyles = false,
 }: OTPInputProps) => {
   const [activeInput, setActiveInput] = React.useState(0);
+  const latestActiveInput = React.useRef(activeInput);
+  latestActiveInput.current = activeInput;
+
   const inputRefs = React.useRef<Array<HTMLInputElement | null>>([]);
 
   const getOTPValue = () => (value ? value.toString().split('') : []);
@@ -195,6 +198,11 @@ const OTPInput = ({
   const changeCodeAtFocus = (value: string) => {
     const otp = getOTPValue();
     otp[activeInput] = value[0];
+    const lastValueIndex = otp.join('').length - 1;
+    if (lastValueIndex < activeInput) {
+      setActiveInput(lastValueIndex);
+      latestActiveInput.current = lastValueIndex;
+    }
     handleOTPChange(otp);
   };