Correctly ovserve input value

Author: garronej

src/SearchBar/SearchBar.tsx

@@ -78,9 +78,7 @@ export const SearchBar = memo(
                     "type": "search",
                     "id": inputId
                 })}
-                {Date.now() === 0 && (
-                    <SearchButton searchInputId={inputId} onClick={onButtonClick} />
-                )}
+                <SearchButton searchInputId={inputId} onClick={onButtonClick} />
             </div>
         );
     })

src/SearchBar/SearchButton.tsx

@@ -6,6 +6,8 @@ import { fr } from "../fr";
 import { assert } from "tsafe/assert";
 import { is } from "tsafe/is";
 import { useConstCallback } from "../tools/powerhooks/useConstCallback";
+import { observeInputValue } from "../tools/observeInputValue";
+import { id } from "tsafe/id";
 
 export type SearchButtonProps = {
     searchInputId: string;
@@ -19,16 +21,17 @@ export function SearchButton(props: SearchButtonProps) {
 
     const [, forceUpdate] = useReducer(x => x + 1, 0);
 
-    const [getInputValue, setGetInputValue] = useState(() => () => "");
-
-    const [resetInputValue, setResetInputValue] = useState<() => void>(() => () => {
-        /* do nothing */
-    });
-    const [focusInputElement, setFocusInputElement] = useState<() => void>(() => () => {
-        /* do nothing */
-    });
-
-    const [isInputFocused, setIsInputFocused] = useState(false);
+    const [{ focusInputElement, getInputValue, resetInputValue, getIsInputFocused }, setInputApi] =
+        useState(() => ({
+            "getInputValue": id<() => string>(() => ""),
+            "resetInputValue": id<() => void>(() => {
+                /* do nothing */
+            }),
+            "focusInputElement": id<() => void>(() => {
+                /* do nothing */
+            }),
+            "getIsInputFocused": id<() => boolean>(() => false)
+        }));
 
     const onClick = useConstCallback(() => {
         const inputValue = getInputValue();
@@ -55,54 +58,22 @@ export function SearchButton(props: SearchButtonProps) {
 
         assert(is<HTMLInputElement>(inputElement));
 
-        setGetInputValue(() => () => inputElement.value);
-
-        const cleanups: (() => void)[] = [];
-
-        inputElement.addEventListener(
-            "input",
-            (() => {
-                const callback = () => {
-                    forceUpdate();
-                };
-
-                cleanups.push(() => inputElement.removeEventListener("input", callback));
-
-                return callback;
-            })()
-        );
-
-        inputElement.addEventListener(
-            "keydown",
-            (() => {
-                const callback = (event: KeyboardEvent) => {
-                    if (event.key !== "Escape") {
-                        return;
-                    }
-
-                    forceUpdate();
-                };
+        setInputApi({
+            "focusInputElement": () => inputElement.focus(),
+            "getInputValue": () => inputElement.value,
+            "resetInputValue": () => (inputElement.value = ""),
+            "getIsInputFocused": () => document.activeElement === inputElement
+        });
 
-                cleanups.push(() => inputElement.removeEventListener("keydown", callback));
-
-                return callback;
-            })()
-        );
+        observeInputValue(inputElement, () => forceUpdate());
 
-        const resetInputValue = () => {
-            inputElement.value = "";
-            inputElement.dispatchEvent(new Event("input"));
-        };
-
-        setResetInputValue(() => resetInputValue);
-
-        setFocusInputElement(() => () => inputElement.focus());
+        const cleanups: (() => void)[] = [];
 
         if (isControlledByUser) {
             inputElement.addEventListener(
                 "focus",
                 (() => {
-                    const callback = () => setIsInputFocused(true);
+                    const callback = () => forceUpdate();
 
                     cleanups.push(() => inputElement.removeEventListener("focus", callback));
 
@@ -113,7 +84,7 @@ export function SearchButton(props: SearchButtonProps) {
             inputElement.addEventListener(
                 "blur",
                 (() => {
-                    const callback = () => setIsInputFocused(false);
+                    const callback = () => forceUpdate();
 
                     cleanups.push(() => inputElement.removeEventListener("blur", callback));
 
@@ -149,7 +120,7 @@ export function SearchButton(props: SearchButtonProps) {
                             return;
                         }
 
-                        resetInputValue();
+                        inputElement.value = "";
                         inputElement.blur();
                     };
 
@@ -165,7 +136,7 @@ export function SearchButton(props: SearchButtonProps) {
         };
     }, [searchInputId, isControlledByUser]);
 
-    if (onClick_props === undefined && (isInputFocused || getInputValue() !== "")) {
+    if (onClick_props === undefined && (getIsInputFocused() || getInputValue() !== "")) {
         return null;
     }
 

src/tools/observeInputValue.ts

@@ -0,0 +1,20 @@
+export function observeInputValue(element: HTMLInputElement, callback: (value: string) => void) {
+    const elementPrototype = Object.getPrototypeOf(element);
+    const descriptor = Object.getOwnPropertyDescriptor(elementPrototype, "value");
+
+    Object.defineProperty(element, "value", {
+        get: function (...args) {
+            // @ts-expect-error
+            return descriptor.get.apply(this, args);
+        },
+        set: function (...args) {
+            // @ts-expect-error
+            descriptor.set.apply(this, args);
+            const newValue = this.value;
+
+            callback(newValue);
+
+            return newValue;
+        }
+    });
+}

stories/Header.stories.tsx

@@ -276,30 +276,21 @@ function MySearchInput(props: MySearchInputProps) {
     ] = useState<HTMLInputElement | null>(null);
 
     return (
-        <>
-            <input
-                ref={setInputElement}
-                className={className}
-                id={id}
-                placeholder={placeholder}
-                type={type}
-                value={search}
-                onChange={event => onSearchChange(event.currentTarget.value)}
-                onKeyDown={event => {
-                    if (event.key === "Escape") {
-                        onSearchChange("");
-                        inputElement?.blur();
-                    }
-                }}
-            />
-            <p
-                style={{
-                    "position": "absolute",
-                    "top": 120,
-                    "left": 0
-                }}
-            >Search results for: {search}</p>
-        </>
+        <input
+            ref={setInputElement}
+            className={className}
+            id={id}
+            placeholder={placeholder}
+            type={type}
+            value={search}
+            onChange={event => onSearchChange(event.currentTarget.value)}
+            onKeyDown={event => {
+                if (event.key === "Escape") {
+                    onSearchChange("");
+                    inputElement?.blur();
+                }
+            }}
+        />
     );
 
 }

stories/SearchBar.stories.tsx

@@ -126,29 +126,20 @@ function MySearchInput(props: MySearchInputProps) {
     ] = useState<HTMLInputElement | null>(null);
 
     return (
-        <>
-            <input
-                className={className}
-                id={id}
-                placeholder={placeholder}
-                type={type}
-                value={search}
-                onChange={event => onSearchChange(event.currentTarget.value)}
-                onKeyDown={event => {
-                    if (event.key === "Escape") {
-                        onSearchChange("");
-                        setInputElement?.blur();
-                    }
-                }}
-            />
-            <p
-                style={{
-                    "position": "absolute",
-                    "top": 120,
-                    "left": 0
-                }}
-            >Search results for: {search}</p>
-        </>
+        <input
+            className={className}
+            id={id}
+            placeholder={placeholder}
+            type={type}
+            value={search}
+            onChange={event => onSearchChange(event.currentTarget.value)}
+            onKeyDown={event => {
+                if (event.key === "Escape") {
+                    onSearchChange("");
+                    setInputElement?.blur();
+                }
+            }}
+        />
     );
         
 }