diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js
index f73305a3fa11e9..633763d7d4ec53 100644
--- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js
+++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js
@@ -29,10 +29,10 @@ describe('', () => {
describe('combobox', () => {
it('should clear the input when blur', () => {
- const { container } = render(
+ const { getByRole } = render(
} />,
);
- const input = container.querySelector('input');
+ const input = getByRole('textbox');
input.focus();
fireEvent.change(document.activeElement, { target: { value: 'a' } });
expect(input.value).to.equal('a');
@@ -49,12 +49,51 @@ describe('', () => {
});
});
- describe('multiple', () => {
+ describe('prop: autoSelect', () => {
+ it('should add new value when autoSelect & multiple on blur', () => {
+ const handleChange = spy();
+ const options = ['one', 'two'];
+ render(
+ }
+ />,
+ );
+ fireEvent.change(document.activeElement, { target: { value: 't' } });
+ fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' });
+ document.activeElement.blur();
+ expect(handleChange.callCount).to.equal(1);
+ expect(handleChange.args[0][1]).to.deep.equal(options);
+ });
+
+ it('should add new value when autoSelect & multiple & freeSolo on blur', () => {
+ const handleChange = spy();
+ render(
+ }
+ />,
+ );
+ fireEvent.change(document.activeElement, { target: { value: 'a' } });
+ document.activeElement.blur();
+ expect(handleChange.callCount).to.equal(1);
+ expect(handleChange.args[0][1]).to.deep.equal(['a']);
+ });
+ });
+
+ describe('prop: multiple', () => {
it('should not crash', () => {
- const { container } = render(
+ const { getByRole } = render(
} multiple />,
);
- const input = container.querySelector('input');
+ const input = getByRole('textbox');
input.focus();
document.activeElement.blur();
input.focus();
@@ -524,14 +563,15 @@ describe('', () => {
describe('prop: disabled', () => {
it('should disable the input', () => {
- const { container } = render(
+ const { getByRole } = render(
}
/>,
);
- expect(container.querySelector('input').disabled).to.be.true;
+ const input = getByRole('textbox');
+ expect(input.disabled).to.be.true;
});
it('should disable the popup button', () => {
@@ -645,14 +685,14 @@ describe('', () => {
it('should not select undefined ', () => {
const handleChange = spy();
- const { container, getByRole } = render(
+ const { getByRole } = render(
}
/>,
);
- const input = container.querySelector('input');
+ const input = getByRole('textbox');
fireEvent.click(input);
const listbox = getByRole('listbox');
diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
index 031f372f283564..6e5cfcb14e6db4 100644
--- a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
+++ b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
@@ -653,7 +653,9 @@ export default function useAutocomplete(props) {
}
if (autoSelect && selectedIndexRef.current !== -1) {
- handleValue(event, filteredOptions[selectedIndexRef.current]);
+ selectNewValue(event, filteredOptions[selectedIndexRef.current]);
+ } else if (autoSelect && freeSolo && inputValue !== '') {
+ selectNewValue(event, inputValue, 'freeSolo');
} else if (!freeSolo) {
resetInputValue(event, value);
}