[Autocomplete] Skip filtering when list of options is loading (mui#33278

)
daniel-rabe · Nov 29, 2022 · e7e1cd6 · e7e1cd6
1 parent 5f81df5
commit e7e1cd6
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 10 deletions.
diff --git a/packages/mui-base/src/AutocompleteUnstyled/useAutocomplete.js b/packages/mui-base/src/AutocompleteUnstyled/useAutocomplete.js
@@ -34,17 +34,21 @@ export function createFilterOptions(config = {}) {
       input = stripDiacritics(input);
     }
 
-    const filteredOptions = options.filter((option) => {
-      let candidate = (stringify || getOptionLabel)(option);
-      if (ignoreCase) {
-        candidate = candidate.toLowerCase();
-      }
-      if (ignoreAccents) {
-        candidate = stripDiacritics(candidate);
-      }
+    const filteredOptions = !input
+      ? options
+      : options.filter((option) => {
+          let candidate = (stringify || getOptionLabel)(option);
+          if (ignoreCase) {
+            candidate = candidate.toLowerCase();
+          }
+          if (ignoreAccents) {
+            candidate = stripDiacritics(candidate);
+          }
 
-      return matchFrom === 'start' ? candidate.indexOf(input) === 0 : candidate.indexOf(input) > -1;
-    });
+          return matchFrom === 'start'
+            ? candidate.indexOf(input) === 0
+            : candidate.indexOf(input) > -1;
+        });
 
     return typeof limit === 'number' ? filteredOptions.slice(0, limit) : filteredOptions;
   };

diff --git a/packages/mui-base/src/AutocompleteUnstyled/useAutocomplete.test.js b/packages/mui-base/src/AutocompleteUnstyled/useAutocomplete.test.js
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { expect } from 'chai';
 import { createRenderer, screen, ErrorBoundary, act, fireEvent } from 'test/utils';
 import { useAutocomplete, createFilterOptions } from '@mui/base/AutocompleteUnstyled';
+import { spy } from 'sinon';
 
 describe('useAutocomplete', () => {
   const { render } = createRenderer();
@@ -144,6 +145,16 @@ describe('useAutocomplete', () => {
         });
       });
 
+      describe('empty', () => {
+        it('does not call getOptionLabel if filter is empty', () => {
+          const getOptionLabelSpy = spy(getOptionLabel);
+          expect(
+            filterOptions(options, { inputValue: '', getOptionLabel: getOptionLabelSpy }),
+          ).to.deep.equal(options);
+          expect(getOptionLabelSpy.callCount).to.equal(0);
+        });
+      });
+
       describe('start', () => {
         it('show only results that start with search', () => {
           expect(filterOptions(options, { inputValue: 'a', getOptionLabel })).to.deep.equal(