Give the ability not to clear the search input on search, change default

behavior #240

Author: garronej

src/Header/Header.tsx

@@ -63,6 +63,8 @@ export type HeaderProps = {
     ) => JSX.Element;
     /** Called when the search button is clicked */
     onSearchButtonClick?: (text: string) => void;
+    /** Default: false */
+    clearSearchInputOnSearch?: boolean;
     classes?: Partial<
         Record<
             | "root"
@@ -124,6 +126,7 @@ export const Header = memo(
             quickAccessItems = [],
             operatorLogo,
             renderSearchInput,
+            clearSearchInputOnSearch = false,
             onSearchButtonClick,
             classes = {},
             style,
@@ -398,6 +401,9 @@ export const Header = memo(
                                                             id={`${id}-search-bar-button`}
                                                             searchInputId={searchInputId}
                                                             onClick={onSearchButtonClick}
+                                                            clearInputOnSearch={
+                                                                clearSearchInputOnSearch
+                                                            }
                                                         />
                                                     </div>
                                                 </div>

src/SearchBar/SearchBar.tsx

@@ -30,7 +30,8 @@ export type SearchBarProps = {
             placeholder: string;
         }
     ) => JSX.Element;
-
+    /** Default: false */
+    clearInputOnSearch?: boolean;
     onButtonClick?: (text: string) => void;
 };
 
@@ -49,6 +50,7 @@ export const SearchBar = memo(
             renderInput = ({ className, id, placeholder, type }) => (
                 <input className={className} id={id} placeholder={placeholder} type={type} />
             ),
+            clearInputOnSearch = false,
             onButtonClick,
             ...rest
         } = props;
@@ -90,7 +92,12 @@ export const SearchBar = memo(
                     "type": "search",
                     "id": inputId
                 })}
-                <SearchButton id={`${id}-button`} searchInputId={inputId} onClick={onButtonClick} />
+                <SearchButton
+                    clearInputOnSearch={clearInputOnSearch}
+                    id={`${id}-button`}
+                    searchInputId={inputId}
+                    onClick={onButtonClick}
+                />
             </div>
         );
     })

src/SearchBar/SearchButton.tsx

@@ -12,11 +12,12 @@ import { id } from "tsafe/id";
 export type SearchButtonProps = {
     id: string;
     searchInputId: string;
+    clearInputOnSearch: boolean;
     onClick: ((text: string) => void) | undefined;
 };
 
 export function SearchButton(props: SearchButtonProps) {
-    const { searchInputId, onClick: onClick_props, id: id_props } = props;
+    const { searchInputId, clearInputOnSearch, onClick: onClick_props, id: id_props } = props;
 
     const { t } = useTranslation();
 
@@ -43,7 +44,9 @@ export function SearchButton(props: SearchButtonProps) {
         }
 
         onClick_props?.(inputValue);
-        resetInputValue();
+        if (clearInputOnSearch) {
+            resetInputValue();
+        }
     });
 
     const isControlledByUser = onClick_props === undefined;

stories/Header.stories.tsx

@@ -46,6 +46,16 @@ const isOpen = useIsHeaderMenuModalOpen();
         "quickAccessItems": {
             "description":
                 "To integrate the Dark mode switch head over to the documentation of the [Display component](https://components.react-dsfr.codegouv.studio/?path=/docs/components-display)"
+        },
+        "onSearchButtonClick": {
+            "description":
+                "Optional, callback called when the user click on the search button or press enter",
+            "control": { "type": null }
+        },
+        "clearSearchInputOnSearch": {
+            "description":
+                "Default: false, if true the search input value will be cleared when the user click on the search button or press enter",
+            "control": { "type": "boolean" }
         }
     },
     "disabledProps": ["lang"]

stories/SearchBar.stories.tsx

@@ -20,6 +20,11 @@ const { meta, getStory } = getStoryFactory({
             "description": "Default: 'Rechercher' (or translation)",
             "control": { "type": "text" }
         },
+        "clearInputOnSearch": {
+            "description":
+                "Default: false, if true the input value will be cleared when the user click on the search button or press enter",
+            "control": { "type": "boolean" }
+        },
         "renderInput": {
             "description": `Optional: To control the input yourself`,
             "control": { "type": null }