Add allowEmptySearch option to SearchBar #240

Author: garronej

src/Header/Header.tsx

@@ -65,6 +65,8 @@ export type HeaderProps = {
     onSearchButtonClick?: (text: string) => void;
     /** Default: false */
     clearSearchInputOnSearch?: boolean;
+    /** Default: false */
+    allowEmptySearch?: boolean;
     classes?: Partial<
         Record<
             | "root"
@@ -127,6 +129,7 @@ export const Header = memo(
             operatorLogo,
             renderSearchInput,
             clearSearchInputOnSearch = false,
+            allowEmptySearch = false,
             onSearchButtonClick,
             classes = {},
             style,
@@ -404,6 +407,7 @@ export const Header = memo(
                                                             clearInputOnSearch={
                                                                 clearSearchInputOnSearch
                                                             }
+                                                            allowEmptySearch={allowEmptySearch}
                                                         />
                                                     </div>
                                                 </div>

src/SearchBar/SearchBar.tsx

@@ -32,6 +32,8 @@ export type SearchBarProps = {
     ) => JSX.Element;
     /** Default: false */
     clearInputOnSearch?: boolean;
+    /** Default: false */
+    allowEmptySearch?: boolean;
     onButtonClick?: (text: string) => void;
 };
 
@@ -51,6 +53,7 @@ export const SearchBar = memo(
                 <input className={className} id={id} placeholder={placeholder} type={type} />
             ),
             clearInputOnSearch = false,
+            allowEmptySearch = false,
             onButtonClick,
             ...rest
         } = props;
@@ -96,6 +99,7 @@ export const SearchBar = memo(
                     clearInputOnSearch={clearInputOnSearch}
                     id={`${id}-button`}
                     searchInputId={inputId}
+                    allowEmptySearch={allowEmptySearch}
                     onClick={onButtonClick}
                 />
             </div>

src/SearchBar/SearchButton.tsx

@@ -13,11 +13,18 @@ export type SearchButtonProps = {
     id: string;
     searchInputId: string;
     clearInputOnSearch: boolean;
+    allowEmptySearch: boolean;
     onClick: ((text: string) => void) | undefined;
 };
 
 export function SearchButton(props: SearchButtonProps) {
-    const { searchInputId, clearInputOnSearch, onClick: onClick_props, id: id_props } = props;
+    const {
+        searchInputId,
+        clearInputOnSearch,
+        allowEmptySearch,
+        onClick: onClick_props,
+        id: id_props
+    } = props;
 
     const { t } = useTranslation();
 
@@ -38,7 +45,7 @@ export function SearchButton(props: SearchButtonProps) {
     const onClick = useConstCallback(() => {
         const inputValue = getInputValue();
 
-        if (inputValue === "") {
+        if (!allowEmptySearch && inputValue === "") {
             focusInputElement();
             return;
         }

stories/Header.stories.tsx

@@ -56,6 +56,11 @@ const isOpen = useIsHeaderMenuModalOpen();
             "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" }
+        },
+        "allowEmptySearch": {
+            "description":
+                "Default: false, if true the user will be able to search with an empty input, otherwise clicking ont the search button or pressing enter will focus the input",
+            "control": { "type": "boolean" }
         }
     },
     "disabledProps": ["lang"]
@@ -106,7 +111,8 @@ export const SimpleHeader = getStory({
                 "target": "_self"
             }
         }
-    ]
+    ],
+    "onSearchButtonClick": undefined
 });
 
 export const SimpleHeaderWithServiceTitleAndTagline = getStory({
@@ -123,7 +129,8 @@ export const SimpleHeaderWithServiceTitleAndTagline = getStory({
         "title": "Accueil - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)"
     },
     "serviceTitle": "Nom du site / service",
-    "serviceTagline": "baseline - précisions sur l'organisation"
+    "serviceTagline": "baseline - précisions sur l'organisation",
+    "onSearchButtonClick": undefined
 });
 
 export const SimpleHeaderWithServiceTitleAndBetaBadge = getStory({
@@ -146,7 +153,8 @@ export const SimpleHeaderWithServiceTitleAndBetaBadge = getStory({
                 Beta
             </Badge>
         </>
-    )
+    ),
+    "onSearchButtonClick": undefined
 });
 
 export const HeaderWithQuickAccessItems = getStory(
@@ -189,7 +197,8 @@ export const HeaderWithQuickAccessItems = getStory(
                     }
                 }
             }
-        ]
+        ],
+        "onSearchButtonClick": undefined
     },
     {
         "description": `See [\\<Display \\/\\>](https://components.react-dsfr.codegouv.studio/?path=/docs/components-display) for instructions on how to integrate the Dark mode switch.  
@@ -218,14 +227,18 @@ export const WithUncontrolledSearchBar = getStory(
         },
         "serviceTitle": "Nom du site / service",
         "serviceTagline": "baseline - précisions sur l'organisation",
-        "onSearchButtonClick": text => alert(`TODO: implement search with text: ${text}`)
+        "onSearchButtonClick": text => alert(`TODO: implement search with text: ${text}`),
+        "clearSearchInputOnSearch": true,
+        "allowEmptySearch": true
     },
     {
         "description": `
 
 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.
 
+You can also have a use the \`clearSearchInputOnSearch\` and \`allowEmptySearch\` props to control the behavior of the search input.  
+
 > 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.
 

stories/SearchBar.stories.tsx

@@ -25,6 +25,11 @@ const { meta, getStory } = getStoryFactory({
                 "Default: false, if true the input value will be cleared when the user click on the search button or press enter",
             "control": { "type": "boolean" }
         },
+        "allowEmptySearch": {
+            "description":
+                "Default: false, if true the user will be able to search with an empty input, otherwise clicking ont the search button or pressing enter will focus the input",
+            "control": { "type": "boolean" }
+        },
         "renderInput": {
             "description": `Optional: To control the input yourself`,
             "control": { "type": null }