react-ui89 0.19.1 → 0.19.2

package/dist/esm/index.js

@@ -303,14 +303,20 @@ function throttledTimeout() {
                 Timeout.set(id, () => callback(), delay);
             }
         },
+        /**
+         * If there is a call that has been scheduled, remove it from the queue.
+         */
+        abort() {
+            Timeout.clear(id, true);
+        },
     };
 }
 
 const THROTTLE_DELAY = 200;
 function Ui89InputText({ value, placeholder, autoTrim = true, onChange, onTyping, onFocus, onBlur, }) {
     const inputRef = useRef(null);
-    const [isTyping, setIsTyping] = useState(false);
     const [intermediateValue, setIntermediateValue] = useState(value);
+    const [isTyping, setIsTyping] = useState(false);
     const onChangeThrottled = useMemo(() => throttledTimeout(), []);
     useEffect(() => {
         if (inputRef.current === null) {
@@ -326,6 +332,8 @@ function Ui89InputText({ value, placeholder, autoTrim = true, onChange, onTyping
             }
         };
         inputRef.current.onblur = () => {
+            onChangeThrottled.abort();
+            update();
             setIsTyping(false);
             if (onTyping) {
                 onTyping(false);
@@ -336,31 +344,40 @@ function Ui89InputText({ value, placeholder, autoTrim = true, onChange, onTyping
         };
     }, [inputRef.current, onBlur, onFocus]);
     useEffect(() => {
-        if (isTyping === null) {
-            return;
-        }
         if (!isTyping) {
-            // Lets show the user what is actually the value.
-            setIntermediateValue(value);
+            // Lets show the user what the actual value is.
+            onChangeThrottled.call(THROTTLE_DELAY, () => {
+                setIntermediateValue(value);
+            });
         }
-    }, [isTyping, value]);
+    }, [value]);
     function implOnChange(e) {
+        setIntermediateValue(e.target.value);
+        onChangeThrottled.call(THROTTLE_DELAY, update);
+    }
+    function update() {
         if (!onChange) {
             return;
         }
-        let newVal = e.target.value;
-        setIntermediateValue(newVal);
+        if (inputRef.current === null) {
+            return;
+        }
+        // We get the current value straight from the element because this function
+        // may have been queued.
+        let newVal = inputRef.current.value;
         if (autoTrim) {
             // Must trim after setting intermediate value. Do not want to disturb
             // user.
             newVal = newVal.replace(/\s+/g, " ").trim();
         }
-        onChangeThrottled.call(THROTTLE_DELAY, () => {
-            onChange(newVal);
-        });
+        if (newVal === value) {
+            // Same value.
+            return;
+        }
+        onChange(newVal);
     }
     return (React__default.createElement("div", null,
-        React__default.createElement("input", { ref: inputRef, className: `${inputBoxStyles.inputBox} ${typoStyles.special}`, type: "text", value: intermediateValue, onChange: implOnChange, placeholder: placeholder })));
+        React__default.createElement("input", { ref: inputRef, value: intermediateValue, className: `${inputBoxStyles.inputBox} ${typoStyles.special}`, type: "text", onChange: implOnChange, placeholder: placeholder })));
 }
 
 function stringRemoveAllWhitespace(str) {
@@ -390,10 +407,8 @@ function Ui89InputTextNumber({
  * The value that is emitted when the input is emptied.
  */
 emptyValue = null, value, min, max, onChange, precision, }) {
+    const [isTyping, setIsTyping] = useState(false);
     const [intermediateValue, setIntermediateValue] = useState(displayText(value, emptyValue));
-    useEffect(() => {
-        setIntermediateValue(displayText(value, emptyValue));
-    }, [value]);
     function implOnChange(value) {
         if (onChange === undefined) {
             return;
@@ -421,11 +436,12 @@ emptyValue = null, value, min, max, onChange, precision, }) {
         }
         onChange(value);
     }
-    function implOnBlur() {
-        // Correct display value.
-        setIntermediateValue(displayText(value, emptyValue));
-    }
-    return (React__default.createElement(Ui89InputText, { value: intermediateValue, onChange: implOnChange, onBlur: implOnBlur }));
+    useEffect(() => {
+        if (!isTyping) {
+            setIntermediateValue(displayText(value, emptyValue));
+        }
+    }, [isTyping, value]);
+    return (React__default.createElement(Ui89InputText, { value: intermediateValue, onChange: implOnChange, onTyping: setIsTyping }));
 }
 
 var styles$a = {"menuBar":"Ui89MenuBar-module_menuBar__IlnEP","menuBarItem":"Ui89MenuBar-module_menuBarItem__UVFg2"};