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;