Repository: mui/material-ui (TypeScript)
Date: 2020-01-04 12:09:14+00:00
Task type: Bug Fix

Issue:
[Autocomplete] Prevent form submit with freeSolo and multiple


![image](https://user-images.githubusercontent.com/33362998/71338793-cbfbb380-2516-11ea-93d4-a32ae1699b9e.png)


https://codesandbox.io/s/vibrant-water-pepu1


Issue discussion:
You can enable "required" tag in your textfield. 
Do you expect the same behavior without using "reqiured" tag? 
I think that this is a leftover during the initial implementation. I would propose the following diff:

```diff
diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
index 7a799b1b81..8baf322864 100644
--- a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
+++ b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
@@ -586,6 +586,10 @@ export default function useAutocomplete(props) {
             );
           }
         } else if (freeSolo && inputValueFilter !== '') {
+          if (multiple) {
+            // Allow people to add new values before they submit the form.
+            event.preventDefault();
+          }
           selectNewValue(event, inputValue);
         }
         break;
```

Does somebody want to work on a pull request? :)
I'd love to work on it. just to clarify, it must behave like the way "required" flag works ? right?  
As far as I understand it, this is unrelated to the "require flag"

So what behavior is expected ? how to warn the user that you need to enter|select at least  one of the Autocomplete options ? 
Hi I would like to give this a go and also this will be my first contribution ever
@haseebdaone You are good to go :)

Solution patch:
diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
--- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
+++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
@@ -356,8 +356,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
           },
           className,
         )}
-        {...getRootProps()}
-        {...other}
+        {...getRootProps(other)}
       >
         {renderInput({
           id,
diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
--- a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
+++ b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
@@ -547,7 +547,7 @@ export default function useAutocomplete(props) {
     handleValue(event, multiple ? [] : null);
   };
 
-  const handleKeyDown = event => {
+  const handleKeyDown = other => event => {
     if (focusedTag !== -1 && ['ArrowLeft', 'ArrowRight'].indexOf(event.key) === -1) {
       setFocusedTag(-1);
       focusTag(-1);
@@ -612,6 +612,10 @@ export default function useAutocomplete(props) {
             );
           }
         } else if (freeSolo && inputValue !== '' && inputValueIsSelectedValue === false) {
+          if (multiple) {
+            // Allow people to add new values before they submit the form.
+            event.preventDefault();
+          }
           selectNewValue(event, inputValue);
         }
         break;
@@ -640,6 +644,10 @@ export default function useAutocomplete(props) {
         break;
       default:
     }
+
+    if (other.onKeyDown) {
+      other.onKeyDown(event);
+    }
   };
 
   const handleFocus = event => {
@@ -792,11 +800,12 @@ export default function useAutocomplete(props) {
   }
 
   return {
-    getRootProps: () => ({
+    getRootProps: (other = {}) => ({
       'aria-owns': popupOpen ? `${id}-popup` : null,
       role: 'combobox',
       'aria-expanded': popupOpen,
-      onKeyDown: handleKeyDown,
+      ...other,
+      onKeyDown: handleKeyDown(other),
       onMouseDown: handleMouseDown,
       onClick: handleClick,
     }),


Test patch:
diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js
--- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js
+++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js
@@ -92,6 +92,42 @@ describe('<Autocomplete />', () => {
     });
   });
 
+  it('should trigger a form expectedly', () => {
+    const handleSubmit = spy();
+    const { setProps } = render(
+      <Autocomplete
+        options={['one', 'two']}
+        onKeyDown={event => {
+          if (!event.defaultPrevented && event.key === 'Enter') {
+            handleSubmit();
+          }
+        }}
+        renderInput={props2 => <TextField {...props2} autoFocus />}
+      />,
+    );
+    fireEvent.keyDown(document.activeElement, { key: 'Enter' });
+    expect(handleSubmit.callCount).to.equal(1);
+
+    fireEvent.change(document.activeElement, { target: { value: 'o' } });
+    fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' });
+    fireEvent.keyDown(document.activeElement, { key: 'Enter' });
+    expect(handleSubmit.callCount).to.equal(1);
+    fireEvent.keyDown(document.activeElement, { key: 'Enter' });
+    expect(handleSubmit.callCount).to.equal(2);
+
+    setProps({ key: 'test-2', multiple: true, freeSolo: true });
+    fireEvent.change(document.activeElement, { target: { value: 'o' } });
+    fireEvent.keyDown(document.activeElement, { key: 'Enter' });
+    expect(handleSubmit.callCount).to.equal(2);
+    fireEvent.keyDown(document.activeElement, { key: 'Enter' });
+    expect(handleSubmit.callCount).to.equal(3);
+
+    setProps({ key: 'test-3', freeSolo: true });
+    fireEvent.change(document.activeElement, { target: { value: 'o' } });
+    fireEvent.keyDown(document.activeElement, { key: 'Enter' });
+    expect(handleSubmit.callCount).to.equal(4);
+  });
+
   describe('WAI-ARIA conforming markup', () => {
     specify('when closed', () => {
       const { getAllByRole, getByRole, queryByRole } = render(