✨ feat(autocomplete): add maxSuggestions prop

README.md

@@ -468,6 +468,13 @@ type onSelectOption=  (params: {
     <td>If true, the menu will close when an item is selected, by mouse or keyboard.</td>
     <td>No</td>
     <td>true</td>
+  </tr> 
+  <tr>
+    <td>maxSuggestions</td>
+    <td>number</td>
+    <td>Limit the maximum number of suggestions that is shown.</td>
+    <td>No</td>
+    <td>&mdash;&mdash;&mdash;</td>
   </tr>  
   <tr>
     <td>shouldRenderSuggestions</td>
@@ -481,11 +488,13 @@ type onSelectOption=  (params: {
 By default, suggestions are rendered when the input isn't blank. Feel free to override this behaviour. This function gets the current value of the input
 
 e.g. The following function is to show the suggestions only if the input has more than two characters.
+
 ```js
 function shouldRenderSuggestions(value) {
   return value.trim().length > 2;
 }
 ```
+
 </td>
     <td>No</td>
     <td>&mdash;&mdash;&mdash;</td>

example/app.tsx

@@ -21,12 +21,13 @@ const App = () => {
   //   setOutValue(e.target.value);
   // };
   const shouldRenderSuggestions: AutoCompleteProps['shouldRenderSuggestions'] = value => {
-    return value.trim().length > 2;
+    return value.trim().length > 0;
   };
 
   return (
     <Flex justify="center" pt="150px">
       <AutoComplete
+        maxSuggestions={3}
         rollNavigation
         // focusInputOnSelect
         // openOnFocus
@@ -35,7 +36,7 @@ const App = () => {
         // creatable
         suggestWhenEmpty
         // closeOnselect={false}
-        shouldRenderSuggestions={shouldRenderSuggestions}
+        // shouldRenderSuggestions={shouldRenderSuggestions}
       >
         <AutoCompleteInput variant="filled" placeholder="Search..." autoFocus />
         <AutoCompleteList>

src/auto-complete-provider.tsx

@@ -37,6 +37,7 @@ export interface AutoComplete extends Omit<BoxProps, 'onChange'> {
   closeOnselect?: boolean;
   closeOnBlur?: boolean;
   shouldRenderSuggestions?: (value: string) => boolean;
+  maxSuggestions?: number;
 }
 
 export type AutoCompleteProps = AutoComplete;
@@ -58,7 +59,8 @@ export const AutoComplete = forwardRef<AutoCompleteProps, 'div'>(
       suggestWhenEmpty,
       closeOnselect = true,
       closeOnBlur = true,
-      shouldRenderSuggestions,
+      shouldRenderSuggestions = () => true,
+      maxSuggestions,
       ...rest
     } = props;
 
@@ -79,6 +81,7 @@ export const AutoComplete = forwardRef<AutoCompleteProps, 'div'>(
         closeOnselect,
         closeOnBlur,
         shouldRenderSuggestions,
+        maxSuggestions,
       },
       input: {
         value: '',

src/helpers/input.ts

@@ -11,19 +11,21 @@ export const useOptionsFilter = (props: AutoCompleteInputProps) => {
 
   const {
     state: {
-      autocomplete: { creatable },
+      autocomplete: { creatable, maxSuggestions },
       input,
       item,
     },
     dispatch,
   } = useAutoCompleteContext();
   const inputValue = input.value;
   const options = item.list;
-  const filteredItems = options.filter(
-    i =>
-      i.value.toLowerCase().indexOf(inputValue.toLowerCase()) > -1 ||
-      i.value.trim().length === 0
-  );
+  const filteredItems = options
+    .filter(
+      opt =>
+        opt.value.toLowerCase().indexOf(inputValue.toLowerCase()) > -1 ||
+        opt.value.trim().length === 0
+    )
+    .filter((_, index) => (maxSuggestions ? index < maxSuggestions : true));
 
   //? Update input state if there's a defaultValue for input
   useEffect(() => {