Moving on with search bar improvements

Author: garronej

src/SearchBar/SearchButton.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useReducer } from "react";
 import { useTranslation } from "./SearchBar";
 import { fr } from "../fr";
 import { assert } from "tsafe/assert";
@@ -17,7 +17,9 @@ export function SearchButton(props: SearchButtonProps) {
 
     const { t } = useTranslation();
 
-    const [inputValue, setInputValue] = useState("");
+    const [, forceUpdate] = useReducer(x => x + 1, 0);
+
+    const [getInputValue, setGetInputValue] = useState(() => () => "");
 
     const [resetInputValue, setResetInputValue] = useState<() => void>(() => () => {
         /* do nothing */
@@ -29,6 +31,8 @@ export function SearchButton(props: SearchButtonProps) {
     const [isInputFocused, setIsInputFocused] = useState(false);
 
     const onClick = useConstCallback(() => {
+        const inputValue = getInputValue();
+
         if (inputValue === "") {
             focusInputElement();
             return;
@@ -38,6 +42,8 @@ export function SearchButton(props: SearchButtonProps) {
         resetInputValue();
     });
 
+    const isControlledByUser = onClick_props === undefined;
+
     useEffect(() => {
         const inputElement = document.getElementById(searchInputId);
 
@@ -49,21 +55,40 @@ export function SearchButton(props: SearchButtonProps) {
 
         assert(is<HTMLInputElement>(inputElement));
 
-        setInputValue(inputElement.value);
+        setGetInputValue(() => () => inputElement.value);
 
         const cleanups: (() => void)[] = [];
 
         inputElement.addEventListener(
             "input",
             (() => {
-                const callback = () => setInputValue(inputElement.value);
+                const callback = () => {
+                    forceUpdate();
+                };
 
                 cleanups.push(() => inputElement.removeEventListener("input", callback));
 
                 return callback;
             })()
         );
 
+        inputElement.addEventListener(
+            "keydown",
+            (() => {
+                const callback = (event: KeyboardEvent) => {
+                    if (event.key !== "Escape") {
+                        return;
+                    }
+
+                    forceUpdate();
+                };
+
+                cleanups.push(() => inputElement.removeEventListener("keydown", callback));
+
+                return callback;
+            })()
+        );
+
         const resetInputValue = () => {
             inputElement.value = "";
             inputElement.dispatchEvent(new Event("input"));
@@ -73,7 +98,7 @@ export function SearchButton(props: SearchButtonProps) {
 
         setFocusInputElement(() => () => inputElement.focus());
 
-        if (onClick_props === undefined) {
+        if (isControlledByUser) {
             inputElement.addEventListener(
                 "focus",
                 (() => {
@@ -95,7 +120,9 @@ export function SearchButton(props: SearchButtonProps) {
                     return callback;
                 })()
             );
-        } else {
+        }
+
+        if (!isControlledByUser) {
             inputElement.addEventListener(
                 "keydown",
                 (() => {
@@ -136,9 +163,9 @@ export function SearchButton(props: SearchButtonProps) {
         return () => {
             cleanups.forEach(cleanup => cleanup());
         };
-    }, [searchInputId, onClick_props]);
+    }, [searchInputId, isControlledByUser]);
 
-    if (onClick_props === undefined && (isInputFocused || inputValue !== "")) {
+    if (onClick_props === undefined && (isInputFocused || getInputValue() !== "")) {
         return null;
     }
 

stories/Header.stories.tsx

@@ -200,10 +200,12 @@ function MySearchInput(props: MySearchInputProps) {
     const { className, id, placeholder, type } = props;
 
     const [search, onSearchChange] = useState("");
+    const [inputElement, setInputElement] = useState<HTMLInputElement | null>(null);
 
     return (
         <>
             <input
+                ref={setInputElement}
                 className={className}
                 id={id}
                 placeholder={placeholder}
@@ -213,6 +215,7 @@ function MySearchInput(props: MySearchInputProps) {
                 onKeyDown={event => {
                     if (event.key === "Escape") {
                         onSearchChange("");
+                        inputElement?.blur();
                     }
                 }}
             />
@@ -267,9 +270,15 @@ function MySearchInput(props: MySearchInputProps) {
 
     const { className, id, placeholder, type, search, onSearchChange } = props;
 
+    const [
+        inputElement,
+        setInputElement
+    ] = useState<HTMLInputElement | null>(null);
+
     return (
         <>
             <input
+                ref={setInputElement}
                 className={className}
                 id={id}
                 placeholder={placeholder}
@@ -279,6 +288,7 @@ function MySearchInput(props: MySearchInputProps) {
                 onKeyDown={event => {
                     if (event.key === "Escape") {
                         onSearchChange("");
+                        inputElement?.blur();
                     }
                 }}
             />

stories/SearchBar.stories.tsx

@@ -63,9 +63,12 @@ function MySearchInput(props: MySearchInputProps) {
 
     const [search, onSearchChange] = useState("");
 
+    const [inputElement, setInputElement] = useState<HTMLInputElement | null>(null);
+
     return (
         <>
             <input
+                ref={setInputElement}
                 className={className}
                 id={id}
                 placeholder={placeholder}
@@ -75,6 +78,7 @@ function MySearchInput(props: MySearchInputProps) {
                 onKeyDown={event => {
                     if (event.key === "Escape") {
                         onSearchChange("");
+                        inputElement?.blur();
                     }
                 }}
             />
@@ -115,7 +119,12 @@ type MySearchInputProps = {
 function MySearchInput(props: MySearchInputProps) {
         
     const { className, id, placeholder, type, search, onSearchChange } = props;
-        
+
+    const [
+        inputElement,
+        setInputElement
+    ] = useState<HTMLInputElement | null>(null);
+
     return (
         <>
             <input
@@ -128,6 +137,7 @@ function MySearchInput(props: MySearchInputProps) {
                 onKeyDown={event => {
                     if (event.key === "Escape") {
                         onSearchChange("");
+                        setInputElement?.blur();
                     }
                 }}
             />