feat(autocomplete): add shouldRenderSuggestions prop

README.md

@@ -468,6 +468,27 @@ 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>shouldRenderSuggestions</td>
+  <td>
+
+`(value: string) => boolean`
+
+</td>
+    <td>
+
+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>
   </tr>
 </tbody>
 </table></div>

example/app.tsx

@@ -7,6 +7,7 @@ import {
   AutoCompleteList,
   AutoCompleteChildProps,
   AutoCompleteFixedItem,
+  AutoCompleteProps,
 } from '../.';
 import { Button, Flex, InputGroup, InputRightElement } from '@chakra-ui/react';
 import { useTheme } from '@chakra-ui/system';
@@ -19,6 +20,10 @@ const App = () => {
   //   console.log(e.target.value);
   //   setOutValue(e.target.value);
   // };
+  const shouldRenderSuggestions: AutoCompleteProps['shouldRenderSuggestions'] = value => {
+    return value.trim().length > 2;
+  };
+
   return (
     <Flex justify="center" pt="150px">
       <AutoComplete
@@ -28,8 +33,9 @@ const App = () => {
         emphasize
         // freeSolo
         // creatable
-        // suggestWhenEmpty
+        suggestWhenEmpty
         // closeOnselect={false}
+        shouldRenderSuggestions={shouldRenderSuggestions}
       >
         <AutoCompleteInput variant="filled" placeholder="Search..." autoFocus />
         <AutoCompleteList>

src/auto-complete-input.tsx

@@ -40,6 +40,7 @@ export const AutoCompleteInput = forwardRef<AutoCompleteInputProps, 'input'>(
       closeOnBlur,
       closeOnselect,
       value: autoCompleteValue,
+      shouldRenderSuggestions,
     } = autocomplete;
 
     const isEmpty = item.filtered.length < 1 && !emptyState;
@@ -57,8 +58,11 @@ export const AutoCompleteInput = forwardRef<AutoCompleteInputProps, 'input'>(
       if (freeSolo) dispatch({ type: AutoCompleteAction.Set, payload: value });
       const inputIsEmpty = value?.length < 1;
       if (!isEmpty) {
-        if (!inputIsEmpty) dispatch({ type: ListAction.Show });
-        else if (!suggestWhenEmpty) hideList();
+        if (!inputIsEmpty) {
+          if (runIfFn(shouldRenderSuggestions, value))
+            dispatch({ type: ListAction.Show });
+          else dispatch({ type: ListAction.Hide });
+        } else if (!suggestWhenEmpty) hideList();
       }
     };
 

src/auto-complete-provider.tsx

@@ -12,15 +12,15 @@ import { inputReducer } from './store/reducers/input';
 import { itemReducer } from './store/reducers/item';
 import { listReducer } from './store/reducers/list';
 
-export type ChildrenProps = {
+export type AutoCompleteChildProps = {
   isOpen: boolean;
   onClose: () => void;
   inputIsEmpty: boolean;
   resetInput: () => void;
 };
 
 export interface AutoComplete extends Omit<BoxProps, 'onChange'> {
-  children?: MaybeRenderProp<ChildrenProps>;
+  children?: MaybeRenderProp<AutoCompleteChildProps>;
   onChange?: (value: string) => void;
   emptyState?: boolean | ReactNode;
   rollNavigation?: boolean;
@@ -36,6 +36,7 @@ export interface AutoComplete extends Omit<BoxProps, 'onChange'> {
   suggestWhenEmpty?: boolean;
   closeOnselect?: boolean;
   closeOnBlur?: boolean;
+  shouldRenderSuggestions?: (value: string) => boolean;
 }
 
 export type AutoCompleteProps = AutoComplete;
@@ -57,6 +58,7 @@ export const AutoComplete = forwardRef<AutoCompleteProps, 'div'>(
       suggestWhenEmpty,
       closeOnselect = true,
       closeOnBlur = true,
+      shouldRenderSuggestions,
       ...rest
     } = props;
 
@@ -76,6 +78,7 @@ export const AutoComplete = forwardRef<AutoCompleteProps, 'div'>(
         suggestWhenEmpty,
         closeOnselect,
         closeOnBlur,
+        shouldRenderSuggestions,
       },
       input: {
         value: '',

src/index.tsx

@@ -1,7 +1,4 @@
-export {
-  AutoComplete,
-  ChildrenProps as AutoCompleteChildProps,
-} from './auto-complete-provider';
+export * from './auto-complete-provider';
 export * from './auto-complete-input';
 export * from './auto-complete-list';
 export * from './auto-complete-item';