[ui][typeahead] add optional minQueryLength parameter

apps/portal/src/components/shared/CitiesTypeahead.tsx

@@ -41,6 +41,7 @@ export default function CitiesTypeahead({
   return (
     <Typeahead
       label={label}
+      minQueryLength={3}
       noResultsMessage="No cities found"
       nullable={true}
       options={

apps/portal/src/components/shared/CountriesTypeahead.tsx

@@ -39,6 +39,7 @@ export default function CountriesTypeahead({
   return (
     <Typeahead
       label="Country"
+      minQueryLength={3}
       noResultsMessage="No countries found"
       nullable={true}
       options={

packages/ui/src/Typeahead/Typeahead.tsx

@@ -28,6 +28,8 @@ type Props = Readonly<{
   errorMessage?: React.ReactNode;
   isLabelHidden?: boolean;
   label: string;
+  // Minimum query length before any results will be shown.
+  minQueryLength?: number;
   noResultsMessage?: string;
   onQueryChange: (
     value: string,
@@ -80,6 +82,7 @@ export default function Typeahead({
   errorMessage,
   isLabelHidden,
   label,
+  minQueryLength = 0,
   noResultsMessage = 'No results',
   nullable = false,
   options,
@@ -167,6 +170,7 @@ export default function Typeahead({
               />
             </Combobox.Button>
           </div>
+          {query.length >= minQueryLength && (
             <Transition
               afterLeave={() => setQuery('')}
               as={Fragment}
@@ -207,6 +211,7 @@ export default function Typeahead({
                 )}
               </Combobox.Options>
             </Transition>
+          )}
         </div>
       </Combobox>
       {errorMessage && (