Fix previous release (mainly related to to search bar)

Author: garronej

src/SearchBar/SearchButton.tsx

@@ -65,10 +65,17 @@ export function SearchButton(props: SearchButtonProps) {
             "getIsInputFocused": () => document.activeElement === inputElement
         });
 
-        observeInputValue(inputElement, () => forceUpdate());
-
         const cleanups: (() => void)[] = [];
 
+        {
+            const { cleanup } = observeInputValue({
+                inputElement,
+                "callback": () => forceUpdate()
+            });
+
+            cleanups.push(cleanup);
+        }
+
         if (isControlledByUser) {
             inputElement.addEventListener(
                 "focus",
@@ -120,7 +127,6 @@ export function SearchButton(props: SearchButtonProps) {
                             return;
                         }
 
-                        inputElement.value = "";
                         inputElement.blur();
                     };
 

src/tools/observeInputValue.ts

@@ -1,20 +1,84 @@
-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;
-        }
-    });
+import { assert } from "tsafe/assert";
+
+// NOTE: The callback is called way too often, it can be called multiple times
+// for the same input value. Futhermore the callback is not guaranteed to be called
+// as soon as the input value changes.
+export function observeInputValue(params: {
+    inputElement: HTMLInputElement;
+    callback: () => void;
+}): { cleanup: () => void } {
+    const { inputElement, callback: callback_params } = params;
+
+    const cleanups: (() => void)[] = [];
+
+    {
+        const descriptorToRestore = Object.getOwnPropertyDescriptor(inputElement, "value");
+
+        cleanups.push(() => {
+            assert(descriptorToRestore !== undefined);
+            Object.defineProperty(inputElement, "value", descriptorToRestore);
+        });
+
+        const inputElementPrototype = Object.getPrototypeOf(inputElement);
+        const descriptor = Object.getOwnPropertyDescriptor(inputElementPrototype, "value");
+
+        Object.defineProperty(inputElement, "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_params();
+
+                return newValue;
+            }
+        });
+    }
+
+    inputElement.addEventListener(
+        "input",
+        (() => {
+            const callback = (): void => {
+                callback_params();
+            };
+
+            cleanups.push(() => inputElement.removeEventListener("input", callback));
+
+            return callback;
+        })()
+    );
+
+    inputElement.addEventListener(
+        "keydown",
+        (() => {
+            const callback = (event: KeyboardEvent) => {
+                if (event.key === "Escape") {
+                    const timer = setTimeout(() => {
+                        cleanups.splice(cleanups.indexOf(cleanup), 1);
+                        callback_params();
+                    }, 50);
+
+                    const cleanup = () => {
+                        clearTimeout(timer);
+                    };
+
+                    cleanups.push(cleanup);
+                }
+            };
+
+            cleanups.push(() => inputElement.removeEventListener("keyup", callback));
+
+            return callback;
+        })()
+    );
+
+    function cleanup() {
+        cleanups.forEach(cleanup => cleanup());
+    }
+
+    return { cleanup };
 }

stories/Header.stories.tsx

@@ -177,6 +177,9 @@ export const WithUncontrolledSearchBar = getStory(
 If you you do not plan to provide any realtime hinting to the user as he types the search query you can provide a \`onSearchButtonClick\`
 callback that will be called when the user click on the search button or press enter.
 
+> NOTE: There is a bug in the DSFR that prevent te input to be cleared when the user press the escape key.  
+We hope it will be fixed soon.
+
 \`\`\`tsx
 
 <Header
@@ -283,14 +286,13 @@ function MySearchInput(props: MySearchInputProps) {
             placeholder={placeholder}
             type={type}
             value={search}
+            // Note: The default behavior for an input of type 'text' is to clear the input value when the escape key is pressed.
+            // However, due to a bug in @gouvfr/dsfr the escape key event is not propagated to the input element.
+            // As a result this onChange is not called when the escape key is pressed.
             onChange={event => onSearchChange(event.currentTarget.value)}
-            // A bug in @gouvfr/dsfr is currently preventing the escape key event to be propagated to the input element.
-            // As a result this onKeyDown is never called when the user press escape and thus is useless.
-            // In the current state of thing there is no way to clear the search input and lost focus in controlled mode.  
-            // We hope this issue will be resolved soon.  
+            // Same goes for the keydown event so this is useless but we hope the bug will be fixed soon.
             onKeyDown={event => {
                 if (event.key === "Escape") {
-                    onSearchChange("");
                     inputElement?.blur();
                 }
             }}

stories/SearchBar.stories.tsx

@@ -77,7 +77,6 @@ function MySearchInput(props: MySearchInputProps) {
                 onChange={event => onSearchChange(event.currentTarget.value)}
                 onKeyDown={event => {
                     if (event.key === "Escape") {
-                        onSearchChange("");
                         inputElement?.blur();
                     }
                 }}
@@ -135,7 +134,6 @@ function MySearchInput(props: MySearchInputProps) {
             onChange={event => onSearchChange(event.currentTarget.value)}
             onKeyDown={event => {
                 if (event.key === "Escape") {
-                    onSearchChange("");
                     setInputElement?.blur();
                 }
             }}