[Autocomplete] Add ability to override key down events handlers

docs/src/pages/components/autocomplete/autocomplete.md

@@ -274,6 +274,22 @@ Search within 10,000 randomly generated options. The list is virtualized thanks
 
 {{"demo": "pages/components/autocomplete/Virtualize.js"}}
 
+## Events
+
+If you would like to prevent the default key handler behavior, you can set the event's `defaultMuiPrevented` property to `true`:
+
+```jsx
+<Autocomplete
+  onKeyDown={(event) => {
+    if (event.key === 'Enter') {
+      // Prevent's default 'Enter' behavior.
+      event.defaultMuiPrevented = false;
+      // your handler code
+    }
+  }}
+/>
+```
+
 ## Limitations
 
 ### autocomplete/autofill

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

@@ -2120,4 +2120,37 @@ describe('<Autocomplete />', () => {
 
     expect(getAllByRole('option')).to.have.length(1);
   });
+
+  it('should prevent the default event handlers', () => {
+    const handleChange = spy();
+    const handleSubmit = spy();
+    const Test = () => (
+      <div
+        onKeyDown={(event) => {
+          if (!event.defaultPrevented && event.key === 'Enter') {
+            handleSubmit();
+          }
+        }}
+      >
+        <Autocomplete
+          options={['one', 'two']}
+          onChange={handleChange}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter') {
+              event.persist();
+              event.defaultMuiPrevented = true;
+            }
+          }}
+          renderInput={(params) => <TextField autoFocus {...params} />}
+        />
+      </div>
+    );
+    render(<Test />);
+    const textbox = screen.getByRole('textbox');
+    fireEvent.keyDown(textbox, { key: 'ArrowDown' });
+    fireEvent.keyDown(textbox, { key: 'ArrowDown' });
+    fireEvent.keyDown(textbox, { key: 'Enter' });
+    expect(handleChange.callCount).to.equal(0);
+    expect(handleSubmit.callCount).to.equal(1);
+  });
 });

packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.js

@@ -429,7 +429,7 @@ const SwipeableDrawer = React.forwardRef(function SwipeableDrawer(inProps, ref)
     }
 
     // We can only have one node at the time claiming ownership for handling the swipe.
-    if (event.muiHandled) {
+    if (event.defaultMuiPrevented) {
       return;
     }
 
@@ -466,7 +466,7 @@ const SwipeableDrawer = React.forwardRef(function SwipeableDrawer(inProps, ref)
       }
     }
 
-    event.muiHandled = true;
+    event.defaultMuiPrevented = true;
     nodeThatClaimedTheSwipe = null;
     swipeInstance.current.startX = currentX;
     swipeInstance.current.startY = currentY;

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

@@ -656,6 +656,14 @@ export default function useAutocomplete(props) {
   };
 
   const handleKeyDown = (other) => (event) => {
+    if (other.onKeyDown) {
+      other.onKeyDown(event);
+    }
+
+    if (event.defaultMuiPrevented) {
+      return;
+    }
+
     if (focusedTag !== -1 && ['ArrowLeft', 'ArrowRight'].indexOf(event.key) === -1) {
       setFocusedTag(-1);
       focusTag(-1);
@@ -723,7 +731,7 @@ export default function useAutocomplete(props) {
             const option = filteredOptions[highlightedIndexRef.current];
             const disabled = getOptionDisabled ? getOptionDisabled(option) : false;
 
-            // We don't want to validate the form.
+            // Avoid early form validation, let the end-users continue filling the form.
             event.preventDefault();
 
             if (disabled) {
@@ -775,10 +783,6 @@ export default function useAutocomplete(props) {
         default:
       }
     }
-
-    if (other.onKeyDown) {
-      other.onKeyDown(event);
-    }
   };
 
   const handleFocus = (event) => {