[Autocomplete] Fix Enter key clearing selected option

packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js

@@ -421,7 +421,7 @@ describe('<Autocomplete />', () => {
         <Autocomplete
           freeSolo
           onChange={handleChange}
-          options={[{ name: 'test' }, { name: 'foo' }]}
+          options={[{ name: 'one' }, { name: 'two ' }]}
           getOptionLabel={option => option.name}
           renderInput={params => <TextField {...params} />}
         />,
@@ -437,4 +437,47 @@ describe('<Autocomplete />', () => {
       );
     });
   });
+
+  describe('enter', () => {
+    it('select a single value when enter is pressed', () => {
+      const handleChange = spy();
+      const { container } = render(
+        <Autocomplete
+          onChange={handleChange}
+          options={['one', 'two  ']}
+          renderInput={params => <TextField {...params} />}
+        />,
+      );
+      const input = container.querySelector('input');
+      fireEvent.keyDown(input, { key: 'ArrowDown' });
+      fireEvent.keyDown(input, { key: 'ArrowDown' });
+      fireEvent.keyDown(input, { key: 'Enter' });
+      expect(handleChange.callCount).to.equal(1);
+      expect(handleChange.args[0][1]).to.equal('one');
+      fireEvent.keyDown(input, { key: 'Enter' });
+      expect(handleChange.callCount).to.equal(1);
+    });
+
+    it('select multiple value when enter is pressed', () => {
+      const handleChange = spy();
+      const options = [{ name: 'one' }, { name: 'two ' }];
+      const { container } = render(
+        <Autocomplete
+          multiple
+          onChange={handleChange}
+          options={options}
+          getOptionLabel={option => option.name}
+          renderInput={params => <TextField {...params} />}
+        />,
+      );
+      const input = container.querySelector('input');
+      fireEvent.keyDown(input, { key: 'ArrowDown' });
+      fireEvent.keyDown(input, { key: 'ArrowDown' });
+      fireEvent.keyDown(input, { key: 'Enter' });
+      expect(handleChange.callCount).to.equal(1);
+      expect(handleChange.args[0][1]).to.deep.equal([options[0]]);
+      fireEvent.keyDown(input, { key: 'Enter' });
+      expect(handleChange.callCount).to.equal(1);
+    });
+  });
 });

packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js

@@ -527,7 +527,7 @@ export default function useAutocomplete(props) {
         handleFocusTag(event, 'next');
         break;
       case 'Enter':
-        if (highlightedIndexRef.current !== -1) {
+        if (highlightedIndexRef.current !== -1 && popupOpen) {
           // We don't want to validate the form.
           event.preventDefault();
           selectNewValue(event, filteredOptions[highlightedIndexRef.current]);