On template creation, don't show search if not needed (#42357)

* On template creation, don't show search if not needed * use useState
WordPress · Jul 13, 2022 · d706005 · d706005
1 parent 72062fc
commit d706005
Showing 1 changed file with 12 additions and 6 deletions.
diff --git a/packages/edit-site/src/components/add-new-template/add-custom-template-modal.js b/packages/edit-site/src/components/add-new-template/add-custom-template-modal.js
@@ -145,14 +145,20 @@ function SuggestionList( { entityForSuggestions, onSelect } ) {
 		debouncedSearch
 	);
 	const { labels } = entityForSuggestions;
+	const [ showSearchControl, setShowSearchControl ] = useState( false );
+	if ( ! showSearchControl && suggestions?.length > 9 ) {
+		setShowSearchControl( true );
+	}
 	return (
 		<>
-			<SearchControl
-				onChange={ setSearch }
-				value={ search }
-				label={ labels.search_items }
-				placeholder={ labels.search_items }
-			/>
+			{ showSearchControl && (
+				<SearchControl
+					onChange={ setSearch }
+					value={ search }
+					label={ labels.search_items }
+					placeholder={ labels.search_items }
+				/>
+			) }
 			{ !! suggestions?.length && (
 				<Composite
 					{ ...composite }