feat(FacetedSearch): Add Typeahead props to QuickSearchInput (#5367)

Talend · Jul 3, 2024 · 46a18aa · 46a18aa
1 parent 50d5895
commit 46a18aa
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 0 deletions.
diff --git a/.changeset/fluffy-colts-sleep.md b/.changeset/fluffy-colts-sleep.md
@@ -0,0 +1,5 @@
+---
+'@talend/react-faceted-search': patch
+---
+
+feat: Add Typeahead props to QuickSearchInput
diff --git a/packages/faceted-search/src/components/BasicSearch/BasicSearch.component.js b/packages/faceted-search/src/components/BasicSearch/BasicSearch.component.js
@@ -45,6 +45,7 @@ const BasicSearch = ({
 	quickSearchPlaceholder,
 	quickSearchFacetsFilter,
 	quickSearchInputProps,
+	quickSearchTypeaheadProps,
 	disclosureProps,
 }) => {
 	const { id, t } = useFacetedSearchContext();
@@ -129,6 +130,7 @@ const BasicSearch = ({
 				}}
 				inputProps={quickSearchInputProps}
 				minLength={quickSearchMinLength}
+				typeaheadProps={quickSearchTypeaheadProps}
 			/>
 			<div className={styles['tc-basic-search-content']}>
 				<BadgeFacetedProvider value={badgeFacetedContextValue}>

diff --git a/packages/faceted-search/src/components/QuickSearchInput/QuickSearchInput.component.js b/packages/faceted-search/src/components/QuickSearchInput/QuickSearchInput.component.js
@@ -21,6 +21,7 @@ export const QuickSearchInput = ({
 	facetsFilter,
 	inputProps,
 	minLength,
+	typeaheadProps = {},
 }) => {
 	const defaultFacet = useMemo(() => getDefaultFacet(facets), [facets]);
 	const [opened, setOpened] = useState(false);
@@ -72,6 +73,7 @@ export const QuickSearchInput = ({
 			role="searchbox"
 			className={className}
 			inputProps={inputProps}
+			{...typeaheadProps}
 		/>
 	);
 };

diff --git a/packages/faceted-search/stories/facetedSearch.stories.js b/packages/faceted-search/stories/facetedSearch.stories.js
@@ -558,3 +558,34 @@ export const WithQuickSearchFilterCustomizableInputTriggerLength = () => {
 		</FacetedSearch.Faceted>
 	);
 };
+
+export const WithQuickSearchAsynchronousSuggestions = () => {
+	const [searching, setSearching] = useState(false);
+	const [items, setItems] = useState([]);
+	const [value, setValue] = useState('');
+	const onChange = (_, { value }) => {
+		setValue(value);
+		setSearching(true);
+		setTimeout(() => {
+			setItems([
+				{
+					title: 'Search in...',
+					suggestions: ['in Name', 'in Email', 'in Position'].map(column => value + ' ' + column),
+				},
+			]);
+			setSearching(false);
+		}, 1000);
+	};
+
+	return (
+		<FacetedSearch.Faceted id="my-faceted-search">
+			<FacetedSearch.BasicSearch
+				badgesDefinitions={badgesDefinitions}
+				callbacks={callbacks}
+				onSubmit={action('onSubmit')}
+				quickSearchInputProps={{ value }}
+				quickSearchTypeaheadProps={{ searching, items, onChange, debounceTimeout: 800 }}
+			/>
+		</FacetedSearch.Faceted>
+	);
+};