From 29bd8bc97123cddc2439d0a59e070f2bd5b92b91 Mon Sep 17 00:00:00 2001
From: David Mzareulyan <david@hiero.ru>
Date: Thu, 27 Jun 2024 22:22:52 +0300
Subject: [PATCH] Update React states right after text update

---
 src/components/autocomplete/autocomplete.jsx |  1 +
 src/components/smart-textarea.jsx            | 17 ++++++++++-------
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/components/autocomplete/autocomplete.jsx b/src/components/autocomplete/autocomplete.jsx
index d633f773e..85d49222a 100644
--- a/src/components/autocomplete/autocomplete.jsx
+++ b/src/components/autocomplete/autocomplete.jsx
@@ -131,4 +131,5 @@ function replaceQuery(input, replacement) {
   input.setSelectionRange(newCaretPos, newCaretPos);
 
   input.dispatchEvent(new Event('input', { bubbles: true }));
+  input.updateStates?.();
 }
diff --git a/src/components/smart-textarea.jsx b/src/components/smart-textarea.jsx
index 55b07dd56..fe03c561e 100644
--- a/src/components/smart-textarea.jsx
+++ b/src/components/smart-textarea.jsx
@@ -63,7 +63,13 @@ export const SmartTextarea = forwardRef(function SmartTextarea(
     };
   }, [cancelEmptyDraftOnBlur, draftKey, ref]);
 
-  ref.current.insertText = useDebouncedInsert(100, ref, onText, draftKey);
+  // Public component methods
+  ref.current.insertText = useDebouncedInsert(100, ref);
+  ref.current.updateStates = useCallback(() => {
+    const text = ref.current.value;
+    onText?.(text);
+    draftKey && setDraftField(draftKey, 'text', text);
+  }, [draftKey, onText, ref]);
 
   useEffect(() => {
     if (!draftKey && !onText) {
@@ -242,7 +248,7 @@ function containsFiles(dndEvent) {
   return false;
 }
 
-function useDebouncedInsert(interval, inputRef, onText, draftKey) {
+function useDebouncedInsert(interval, inputRef) {
   const queue = useRef([]);
   const timer = useRef(0);
 
@@ -267,11 +273,8 @@ function useDebouncedInsert(interval, inputRef, onText, draftKey) {
     input.value = text;
     input.setSelectionRange(selStart, selEnd);
     input.focus();
-    onText?.(input.value);
-    if (draftKey) {
-      setDraftField(draftKey, 'text', input.value);
-    }
-  }, [draftKey, inputRef, onText]);
+    input.updateStates();
+  }, [inputRef]);
 
   return useCallback(
     (insertion) => {