Update to 1.1.31

PackageSources/js-bundle/src/components/input/Input.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { v4 } from 'uuid';
 import Keyboard from '../keyboard/Keyboard';
 
@@ -21,33 +21,42 @@ export default function Input(props: {
   const blurRef = useRef<boolean>(false);
   const [isFocused, setFocused] = useState(false);
   const [showKeyboard, setShowKeyboard] = useState(false);
-  const [unfocusTimer, setUnfocusTimer] = useState<NodeJS.Timeout | null>(null);
+  const unfocusTimerRef = useRef<NodeJS.Timeout | null>(null);
+
+  const clearUnfocusTimer = useCallback(() => {
+    if (unfocusTimerRef.current !== null) {
+      clearTimeout(unfocusTimerRef.current);
+      unfocusTimerRef.current = null;
+    }
+  }, []);
+
+  const scheduleUnfocus = useCallback(() => {
+    clearUnfocusTimer();
+
+    unfocusTimerRef.current = setTimeout(() => {
+      blurRef.current = false;
+      ref.current?.blur();
+    }, 5e3);
+  }, [clearUnfocusTimer]);
 
   useEffect(() => {
-    if (unfocusTimer) {
-      clearTimeout(unfocusTimer);
-      setUnfocusTimer(null);
-    }
-
     if (isFocused) {
-      setUnfocusTimer(setTimeout(() => ref.current?.blur(), 5e3));
+      scheduleUnfocus();
       Coherent.trigger('FOCUS_INPUT_FIELD', guid, '', '', '', false);
     } else {
-      console.log('UNFOCUS_INPUT_FIELD');
+      clearUnfocusTimer();
       Coherent.trigger('UNFOCUS_INPUT_FIELD', guid);
     }
 
     return () => {
-      if (unfocusTimer) {
-        clearTimeout(unfocusTimer);
-        setUnfocusTimer(null);
-      }
+      clearUnfocusTimer();
     };
-  }, [isFocused, guid]);
+  }, [isFocused, guid, scheduleUnfocus, clearUnfocusTimer]);
 
   return (
     <>
       <input
+        id={guid}
         ref={ref}
         type={props.type ? props.type : 'text'}
         min={props.min}
@@ -63,8 +72,9 @@ export default function Input(props: {
           }
         }}
         onBlur={(e) => {
-          if (blurRef.current && isFocused) ref.current?.focus();
-          else {
+          if (blurRef.current && isFocused) {
+            ref.current?.focus();
+          } else {
             props.onBlur?.(e.target.value);
             setShowKeyboard(false);
             setFocused(false);
@@ -73,12 +83,12 @@ export default function Input(props: {
           blurRef.current = false;
         }}
         onChange={(e) => {
-          if (props.onChange) props.onChange(e.target.value);
-          if (unfocusTimer) {
-            clearTimeout(unfocusTimer);
-            setUnfocusTimer(null);
+          if (props.onChange) {
+            props.onChange(e.target.value);
+          }
+          if (isFocused) {
+            scheduleUnfocus();
           }
-          if (isFocused) setUnfocusTimer(setTimeout(() => ref.current?.blur(), 5e3));
         }}
         value={props.value}
         className={props.className}
@@ -89,7 +99,13 @@ export default function Input(props: {
           top={props.topKeyboard}
           value={String(props.value)}
           blurRef={blurRef}
-          onInput={(value) => props.onChange && props.onChange(value)}
+          onInput={(value) => {
+            props.onChange && props.onChange(value);
+
+            if (isFocused) {
+              scheduleUnfocus();
+            }
+          }}
           onClose={() => {
             setShowKeyboard(false);
             setFocused(false);