From 63d6c4f2f5cb9e932d36b213e06a26afa91d193a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9=20=D0=9D=D0=B8?=
 =?UTF-8?q?=D0=BA=D0=B8=D1=84=D0=BE=D1=80=D0=BE=D0=B2?= <d@jstking.ru>
Date: Sun, 23 Nov 2025 04:07:20 +0200
Subject: [PATCH] fix(inputOtp): #8404, fixed the lack of an immediate value
 update

---
 packages/headless/src/inputotp/useInputOtp.ts | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/headless/src/inputotp/useInputOtp.ts b/packages/headless/src/inputotp/useInputOtp.ts
index 12a198c26c..2f93d384ed 100644
--- a/packages/headless/src/inputotp/useInputOtp.ts
+++ b/packages/headless/src/inputotp/useInputOtp.ts
@@ -9,6 +9,7 @@ export const useInputOtp = withHeadless({
     defaultProps,
     setup({ props }) {
         const [valueState, setValueState] = React.useState<useInputOtpProps['value']>(props.value ?? props.defaultValue ?? null);
+        const [valueEvent, setValueEvent] = React.useState<React.FormEvent<HTMLInputElement> | React.ClipboardEvent<HTMLInputElement>>();
         const [tokens, setTokens] = React.useState<string[]>(() => {
             const initialValue = props.value ?? props.defaultValue ?? '';
 
@@ -54,8 +55,9 @@ export const useInputOtp = withHeadless({
             const currentTokens = [...tokens];
 
             currentTokens[index] = target.value;
+
+            setValueEvent(event);
             setTokens(currentTokens);
-            updateValue(event);
 
             if (inputEvent.inputType === 'deleteContentBackward') {
                 moveToPrev(event);
@@ -157,14 +159,18 @@ export const useInputOtp = withHeadless({
                 if (!props.integerOnly || !isNaN(Number(pastedCode))) {
                     const newTokens = pastedCode.split('');
 
+                    setValueEvent(event);
                     setTokens(newTokens);
-                    updateValue(event);
                 }
             }
 
             event.preventDefault();
         };
 
+        React.useEffect(() => {
+            if (valueEvent) updateValue(valueEvent);
+        }, [tokens, valueEvent]);
+
         return {
             state,
             // methods