Skip to content

Commit f2f648c

Browse files
committed
Give the ability not to clear the search input on search, change default
behavior #240
1 parent 3c2b7e7 commit f2f648c

File tree

5 files changed

+35
-4
lines changed

5 files changed

+35
-4
lines changed

src/Header/Header.tsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,8 @@ export type HeaderProps = {
6363
) => JSX.Element;
6464
/** Called when the search button is clicked */
6565
onSearchButtonClick?: (text: string) => void;
66+
/** Default: false */
67+
clearSearchInputOnSearch?: boolean;
6668
classes?: Partial<
6769
Record<
6870
| "root"
@@ -124,6 +126,7 @@ export const Header = memo(
124126
quickAccessItems = [],
125127
operatorLogo,
126128
renderSearchInput,
129+
clearSearchInputOnSearch = false,
127130
onSearchButtonClick,
128131
classes = {},
129132
style,
@@ -398,6 +401,9 @@ export const Header = memo(
398401
id={`${id}-search-bar-button`}
399402
searchInputId={searchInputId}
400403
onClick={onSearchButtonClick}
404+
clearInputOnSearch={
405+
clearSearchInputOnSearch
406+
}
401407
/>
402408
</div>
403409
</div>

src/SearchBar/SearchBar.tsx

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,8 @@ export type SearchBarProps = {
3030
placeholder: string;
3131
}
3232
) => JSX.Element;
33-
33+
/** Default: false */
34+
clearInputOnSearch?: boolean;
3435
onButtonClick?: (text: string) => void;
3536
};
3637

@@ -49,6 +50,7 @@ export const SearchBar = memo(
4950
renderInput = ({ className, id, placeholder, type }) => (
5051
<input className={className} id={id} placeholder={placeholder} type={type} />
5152
),
53+
clearInputOnSearch = false,
5254
onButtonClick,
5355
...rest
5456
} = props;
@@ -90,7 +92,12 @@ export const SearchBar = memo(
9092
"type": "search",
9193
"id": inputId
9294
})}
93-
<SearchButton id={`${id}-button`} searchInputId={inputId} onClick={onButtonClick} />
95+
<SearchButton
96+
clearInputOnSearch={clearInputOnSearch}
97+
id={`${id}-button`}
98+
searchInputId={inputId}
99+
onClick={onButtonClick}
100+
/>
94101
</div>
95102
);
96103
})

src/SearchBar/SearchButton.tsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,12 @@ import { id } from "tsafe/id";
1212
export type SearchButtonProps = {
1313
id: string;
1414
searchInputId: string;
15+
clearInputOnSearch: boolean;
1516
onClick: ((text: string) => void) | undefined;
1617
};
1718

1819
export function SearchButton(props: SearchButtonProps) {
19-
const { searchInputId, onClick: onClick_props, id: id_props } = props;
20+
const { searchInputId, clearInputOnSearch, onClick: onClick_props, id: id_props } = props;
2021

2122
const { t } = useTranslation();
2223

@@ -43,7 +44,9 @@ export function SearchButton(props: SearchButtonProps) {
4344
}
4445

4546
onClick_props?.(inputValue);
46-
resetInputValue();
47+
if (clearInputOnSearch) {
48+
resetInputValue();
49+
}
4750
});
4851

4952
const isControlledByUser = onClick_props === undefined;

stories/Header.stories.tsx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,16 @@ const isOpen = useIsHeaderMenuModalOpen();
4646
"quickAccessItems": {
4747
"description":
4848
"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)"
49+
},
50+
"onSearchButtonClick": {
51+
"description":
52+
"Optional, callback called when the user click on the search button or press enter",
53+
"control": { "type": null }
54+
},
55+
"clearSearchInputOnSearch": {
56+
"description":
57+
"Default: false, if true the search input value will be cleared when the user click on the search button or press enter",
58+
"control": { "type": "boolean" }
4959
}
5060
},
5161
"disabledProps": ["lang"]

stories/SearchBar.stories.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,11 @@ const { meta, getStory } = getStoryFactory({
2020
"description": "Default: 'Rechercher' (or translation)",
2121
"control": { "type": "text" }
2222
},
23+
"clearInputOnSearch": {
24+
"description":
25+
"Default: false, if true the input value will be cleared when the user click on the search button or press enter",
26+
"control": { "type": "boolean" }
27+
},
2328
"renderInput": {
2429
"description": `Optional: To control the input yourself`,
2530
"control": { "type": null }

0 commit comments

Comments
 (0)