diff --git a/docs/src/pages/components/autocomplete/autocomplete.md b/docs/src/pages/components/autocomplete/autocomplete.md index 8a688a9ba950bf..dc1e1047e3f269 100644 --- a/docs/src/pages/components/autocomplete/autocomplete.md +++ b/docs/src/pages/components/autocomplete/autocomplete.md @@ -275,6 +275,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 + { + if (event.key === 'Enter') { + // Prevent's default 'Enter' behavior. + event.defaultMuiPrevented = false; + // your handler code + } + }} +/> +``` + ## Limitations ### autocomplete/autofill diff --git a/packages/material-ui/src/Autocomplete/Autocomplete.test.js b/packages/material-ui/src/Autocomplete/Autocomplete.test.js index 44c179555c19af..997c5a35d8a503 100644 --- a/packages/material-ui/src/Autocomplete/Autocomplete.test.js +++ b/packages/material-ui/src/Autocomplete/Autocomplete.test.js @@ -533,17 +533,22 @@ describe('', () => { it('should trigger a form expectedly', () => { const handleSubmit = spy(); - const { setProps } = render( - ( +
{ if (!event.defaultPrevented && event.key === 'Enter') { handleSubmit(); } }} - renderInput={(props2) => } - />, + > + } + {...props} + /> +
); + const { setProps } = render(); let textbox = screen.getByRole('textbox'); fireEvent.keyDown(textbox, { key: 'Enter' }); @@ -580,19 +585,22 @@ describe('', () => { const handleSubmit = spy(); const handleChange = spy(); const { getAllByRole } = render( - option === 'two'} +
{ if (!event.defaultPrevented && event.key === 'Enter') { handleSubmit(); } }} - onChange={handleChange} - openOnFocus - options={['one', 'two', 'three']} - renderInput={(props2) => } - />, + > + option === 'two'} + onChange={handleChange} + openOnFocus + options={['one', 'two', 'three']} + renderInput={(props2) => } + /> +
, ); let options; @@ -2099,4 +2107,25 @@ describe('', () => { expect(getAllByRole('option')).to.have.length(1); }); + + it('should prevent the default event handlers', () => { + const handleChange = spy(); + render( + { + if (event.key === 'Enter') { + event.defaultMuiPrevented = true; + } + }} + renderInput={(params) => } + />, + ); + 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); + }); }); diff --git a/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.js b/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.js index 0a9394410cfb35..c1690a6b130f88 100644 --- a/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.js +++ b/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; diff --git a/packages/material-ui/src/useAutocomplete/useAutocomplete.js b/packages/material-ui/src/useAutocomplete/useAutocomplete.js index 5dd73579276e0e..97769b6460b94d 100644 --- a/packages/material-ui/src/useAutocomplete/useAutocomplete.js +++ b/packages/material-ui/src/useAutocomplete/useAutocomplete.js @@ -208,7 +208,7 @@ export default function useAutocomplete(props) { const listboxAvailable = open && filteredOptions.length > 0; if (process.env.NODE_ENV !== 'production') { - if (value !== null && !freeSolo && options?.length > 0) { + if (value !== null && !freeSolo && options.length > 0) { const missingValue = (multiple ? value : [value]).filter( (value2) => !options.some((option) => getOptionSelected(option, value2)), ); @@ -657,6 +657,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); @@ -776,10 +784,6 @@ export default function useAutocomplete(props) { default: } } - - if (other.onKeyDown) { - other.onKeyDown(event); - } }; const handleFocus = (event) => {