[Autocomplete] Add startAfter option (mui#20305)

EsoterikStare · Mar 30, 2020 · 647604a · 647604a
1 parent b60dc0b
commit 647604a
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 2 deletions.
diff --git a/docs/src/pages/components/autocomplete/autocomplete.md b/docs/src/pages/components/autocomplete/autocomplete.md
@@ -152,10 +152,11 @@ import { createFilterOptions } from '@material-ui/lab/Autocomplete';
 1. `config` (*Object* [optional]):
   - `config.ignoreAccents` (*Boolean* [optional]): Defaults to `true`. Remove diacritics.
   - `config.ignoreCase` (*Boolean* [optional]): Defaults to `true`. Lowercase everything.
+  - `config.limit` (*Number* [optional]): Default to null. Limit the number of suggested options to be shown. For example, if `config.limit` is `100`, only the first `100` matching options are shown. It can be useful if a lot of options match and virtualization wasn't set up.
   - `config.matchFrom` (*'any' | 'start'* [optional]): Defaults to `'any'`.
+  - `config.startAfter`(*Number* [optional]): Default to `0`. Show the suggested options only after a certain number of letters
   - `config.stringify` (*Func* [optional]): Controls how an option is converted into a string so that it can be matched against the input text fragment.
   - `config.trim` (*Boolean* [optional]): Defaults to `false`. Remove trailing spaces.
-  - `config.limit` (*Number* [optional]): Default to null. Limit the number of suggested options to be shown. For example, if `config.limit` is `100`, only the first `100` matching options are shown. It can be useful if a lot of options match and virtualization wasn't set up.
 
 #### Returns
 

diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
@@ -15,10 +15,11 @@ export function createFilterOptions(config = {}) {
   const {
     ignoreAccents = true,
     ignoreCase = true,
+    limit,
     matchFrom = 'any',
+    startAfter = 0,
     stringify,
     trim = false,
-    limit,
   } = config;
 
   return (options, { inputValue, getOptionLabel }) => {
@@ -29,6 +30,11 @@ export function createFilterOptions(config = {}) {
     if (ignoreAccents) {
       input = stripDiacritics(input);
     }
+
+    if (startAfter > 0 && input.length <= startAfter) {
+      return [];
+    }
+
     const filteredOptions = options.filter((option) => {
       let candidate = (stringify || getOptionLabel)(option);
       if (ignoreCase) {

diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.test.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.test.js
@@ -23,4 +23,32 @@ describe('createFilterOptions', () => {
 
     expect(filterOptions(options, { inputValue: 'a', getOptionLabel })).to.deep.equal([options[0]]);
   });
+
+  describe('option: startAfter', () => {
+    it('start to search only after the second letter', () => {
+      const filterOptions = createFilterOptions({ startAfter: 2 });
+
+      const getOptionLabel = (option) => option.name;
+      const options = [
+        {
+          id: '1234',
+          name: 'cat',
+        },
+        {
+          id: '5678',
+          name: 'dog',
+        },
+        {
+          id: '9abc',
+          name: 'emu',
+        },
+      ];
+
+      expect(filterOptions(options, { inputValue: 'c', getOptionLabel })).to.deep.equal([]);
+      expect(filterOptions(options, { inputValue: 'ca', getOptionLabel })).to.deep.equal([]);
+      expect(filterOptions(options, { inputValue: 'cat', getOptionLabel })).to.deep.equal([
+        options[0],
+      ]);
+    });
+  });
 });