fxing search control to be a controlled text box

Author: shaipetel

src/controls/search.tsx

@@ -1,9 +1,8 @@
 import { Input, InputProps, makeStyles, mergeClasses } from '@fluentui/react-components';
 import { DismissRegular, SearchRegular } from "@fluentui/react-icons";
-import { debounce, isFunction, isNullOrEmptyString, isUndefined } from '@kwiz/common';
-import React, { useState } from 'react';
+import { debounce, isNullOrEmptyString } from '@kwiz/common';
+import React, { useRef } from 'react';
 import { GetLogger } from '../_modules/config';
-import { useStateEX } from '../helpers';
 import { mixins } from '../styles/styles';
 const logger = GetLogger("Search");
 
@@ -16,55 +15,47 @@ const useStyles = makeStyles({
     },
 })
 
-interface IProps extends InputProps {
+interface IProps extends Omit<InputProps, "onChange"> {
     main?: boolean;
+    /** number of seconds to debounce the deferred event */
     delay?: number;
     /** if changing the value in the caller - change this prop to reset */
     resetValue?: string;
     onChangeDeferred?: (newValue: string) => void;
-    onChangeSync?: (newValue: string) => void;
+    onChange?: (newValue: string) => void;
 }
 
 /** value is set on first load. to change the value after it was first set - change the compoenet's key. */
 export const Search: React.FunctionComponent<React.PropsWithChildren<IProps>> = (props) => {
     const cssNames = useStyles();
 
-    const [resetKey, setResetKey] = useState(1);
-
     let delay = props.delay || 1;
 
+    let refonChangeDeferred = useRef(props.onChangeDeferred);
+    //keep updating the ref
+    React.useEffect(() => { refonChangeDeferred.current = props.onChangeDeferred; }, [props.onChangeDeferred]);
+
     //cannot call debounce every render, since it won't be the same debounced instance...
     var notifyParent = React.useMemo(() => debounce(v => {
         logger.log(`Set: ${v}`);
-        props.onChangeDeferred(v);
+        //Call the latest ref - we don't want to call an old version of this function
+        refonChangeDeferred.current?.(v);
     }, delay * 1000), [delay]);
 
-    let [value, setValue] = useStateEX(props.value || "", {
-        onChange: newValue => {
-            if (isFunction(props.onChangeSync)) props.onChangeSync(newValue as string);
-            if (isFunction(props.onChangeDeferred)) notifyParent(newValue);
-            return newValue;
-        }
-    });
-
-    //once props change, reset this control value to match
-    React.useEffect(() => {
-        if (!isUndefined(props.resetValue))
-            setValue(props.resetValue);
-        //todo: bug: setting value does not sync into the text box
-        setResetKey(resetKey + 1)
-    }, [props.resetValue]);
+    const currentValue = props.value || "";
 
     return (
-        <Input key={resetKey} {...props} value={value} onChange={(e, data) => setValue(data.value)}
+        <Input {...props} value={currentValue} onChange={(e, data) => {
+            props.onChange?.(data.value);
+            notifyParent(data.value);
+        }}
             className={mergeClasses(cssNames.root, props.main && cssNames.main)}
-            contentBefore={!isNullOrEmptyString(value) ? undefined : <SearchRegular className={cssNames.searchIcon} />}
-            contentAfter={isNullOrEmptyString(value)
+            contentBefore={!isNullOrEmptyString(currentValue) ? undefined : <SearchRegular className={cssNames.searchIcon} />}
+            contentAfter={isNullOrEmptyString(currentValue)
                 ? undefined
                 : <DismissRegular className={cssNames.clickable} onClick={() => {
-                    setValue("");
-                    //todo: bug: setting value does not sync into the text box
-                    setResetKey(resetKey + 1)
+                    props.onChange?.("");
+                    notifyParent("");
                 }} />
             } />
     );