diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js index b7beddd0401445..ab4ac15a667231 100644 --- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js +++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js @@ -889,4 +889,34 @@ describe('', () => { expect(textbox).to.not.have.focus; }); }); + + describe('prop: getOptionLabel', () => { + it('is considered for falsy values when filtering the the list of options', () => { + const { getAllByRole } = render( + (option === 0 ? 'Any' : option.toString())} + renderInput={params => } + value={0} + />, + ); + + const options = getAllByRole('option'); + expect(options).to.have.length(3); + }); + + it('is not considered for nullish values when filtering the list of options', () => { + const { getAllByRole } = render( + (option === null ? 'Any' : option.toString())} + renderInput={params => } + value={null} + />, + ); + + const options = getAllByRole('option'); + expect(options).to.have.length(3); + }); + }); }); diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js index 7a799b1b81dbce..1b0cd74fc523c9 100644 --- a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js +++ b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js @@ -232,8 +232,8 @@ export default function useAutocomplete(props) { const [openState, setOpenState] = React.useState(false); const open = isOpenControlled ? openProp : openState; - const inputValueFilter = - !multiple && value && inputValue === getOptionLabel(value) ? '' : inputValue; + const inputValueIsSelectedValue = + !multiple && value != null && inputValue === getOptionLabel(value); let popupOpen = open; @@ -250,7 +250,9 @@ export default function useAutocomplete(props) { } return true; }), - { inputValue: inputValueFilter }, + // we use the empty string to manipulate `filterOptions` to not filter any options + // i.e. the filter predicate always returns true + { inputValue: inputValueIsSelectedValue ? '' : inputValue }, ) : []; @@ -585,7 +587,7 @@ export default function useAutocomplete(props) { inputRef.current.value.length, ); } - } else if (freeSolo && inputValueFilter !== '') { + } else if (freeSolo && inputValue !== '' && inputValueIsSelectedValue === false) { selectNewValue(event, inputValue); } break;