From 1ea8c3aaf2da98822cf9666808caf41d52b09524 Mon Sep 17 00:00:00 2001 From: "nicolas.debeissat" Date: Fri, 24 Jun 2022 10:21:12 +0200 Subject: [PATCH 1/3] when list of options is loading, no need to filter if no filter has been typed --- .../src/AutocompleteUnstyled/useAutocomplete.js | 3 +++ .../useAutocomplete.test.js | 17 +++++++++++++++++ 2 files changed, 20 insertions(+) diff --git a/packages/mui-base/src/AutocompleteUnstyled/useAutocomplete.js b/packages/mui-base/src/AutocompleteUnstyled/useAutocomplete.js index fefcf1174add6e..47fa7ff083536c 100644 --- a/packages/mui-base/src/AutocompleteUnstyled/useAutocomplete.js +++ b/packages/mui-base/src/AutocompleteUnstyled/useAutocomplete.js @@ -27,6 +27,9 @@ export function createFilterOptions(config = {}) { return (options, { inputValue, getOptionLabel }) => { let input = trim ? inputValue.trim() : inputValue; + if (!input) { + return typeof limit === 'number' ? options.slice(0, limit) : options; + } if (ignoreCase) { input = input.toLowerCase(); } diff --git a/packages/mui-base/src/AutocompleteUnstyled/useAutocomplete.test.js b/packages/mui-base/src/AutocompleteUnstyled/useAutocomplete.test.js index f3912b228da8a4..37173519d5e805 100644 --- a/packages/mui-base/src/AutocompleteUnstyled/useAutocomplete.test.js +++ b/packages/mui-base/src/AutocompleteUnstyled/useAutocomplete.test.js @@ -144,6 +144,23 @@ describe('useAutocomplete', () => { }); }); + describe('empty', () => { + it('does not call getOptionLabel if filter is empty', () => { + let countCallGetOptionLabel = 0; + const countGetOptionLabel = (option) => { + countCallGetOptionLabel += 1; + return getOptionLabel(option); + }; + expect(filterOptions(options, { inputValue: '', countGetOptionLabel })).to.deep.equal( + options, + ); + expect(countCallGetOptionLabel).to.equal( + 0, + 'getOptionLabel has been called whereas filter is empty', + ); + }); + }); + describe('start', () => { it('show only results that start with search', () => { expect(filterOptions(options, { inputValue: 'a', getOptionLabel })).to.deep.equal( From 9b0cee6e213d87b2b336122547e463f5e7bd06f1 Mon Sep 17 00:00:00 2001 From: "nicolas.debeissat" Date: Wed, 20 Jul 2022 14:30:37 +0200 Subject: [PATCH 2/3] corrections from review thanks --- .../useAutocomplete.test.js | 18 ++++++------------ 1 file changed, 6 insertions(+), 12 deletions(-) diff --git a/packages/mui-base/src/AutocompleteUnstyled/useAutocomplete.test.js b/packages/mui-base/src/AutocompleteUnstyled/useAutocomplete.test.js index 37173519d5e805..f964fa6da09333 100644 --- 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(); @@ -146,18 +147,11 @@ describe('useAutocomplete', () => { describe('empty', () => { it('does not call getOptionLabel if filter is empty', () => { - let countCallGetOptionLabel = 0; - const countGetOptionLabel = (option) => { - countCallGetOptionLabel += 1; - return getOptionLabel(option); - }; - expect(filterOptions(options, { inputValue: '', countGetOptionLabel })).to.deep.equal( - options, - ); - expect(countCallGetOptionLabel).to.equal( - 0, - 'getOptionLabel has been called whereas filter is empty', - ); + const getOptionLabelSpy = spy(getOptionLabel); + expect( + filterOptions(options, { inputValue: '', getOptionLabel: getOptionLabelSpy }), + ).to.deep.equal(options); + expect(getOptionLabelSpy.callCount).to.equal(0); }); }); From 3ca6c90a13fad6dacfb0f1b77b95dd58ec1237af Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 29 Sep 2022 18:15:05 +0200 Subject: [PATCH 3/3] Update the logic a bit --- .../AutocompleteUnstyled/useAutocomplete.js | 27 ++++++++++--------- 1 file changed, 14 insertions(+), 13 deletions(-) diff --git a/packages/mui-base/src/AutocompleteUnstyled/useAutocomplete.js b/packages/mui-base/src/AutocompleteUnstyled/useAutocomplete.js index 47fa7ff083536c..6aa0551427cb02 100644 --- a/packages/mui-base/src/AutocompleteUnstyled/useAutocomplete.js +++ b/packages/mui-base/src/AutocompleteUnstyled/useAutocomplete.js @@ -27,9 +27,6 @@ export function createFilterOptions(config = {}) { return (options, { inputValue, getOptionLabel }) => { let input = trim ? inputValue.trim() : inputValue; - if (!input) { - return typeof limit === 'number' ? options.slice(0, limit) : options; - } if (ignoreCase) { input = input.toLowerCase(); } @@ -37,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; };