diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.js b/packages/mui-material/src/Autocomplete/Autocomplete.js index 7425a7cc9386c0..15f91a2f2564b1 100644 --- a/packages/mui-material/src/Autocomplete/Autocomplete.js +++ b/packages/mui-material/src/Autocomplete/Autocomplete.js @@ -280,6 +280,7 @@ const AutocompleteListbox = styled('div', { padding: '8px 0', maxHeight: '40vh', overflow: 'auto', + position: 'relative', [`& .${autocompleteClasses.option}`]: { minHeight: 48, display: 'flex', diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.test.js b/packages/mui-material/src/Autocomplete/Autocomplete.test.js index f4282ecdfe31b0..c94264b53580c1 100644 --- a/packages/mui-material/src/Autocomplete/Autocomplete.test.js +++ b/packages/mui-material/src/Autocomplete/Autocomplete.test.js @@ -19,6 +19,7 @@ import Autocomplete, { } from '@mui/material/Autocomplete'; import { paperClasses } from '@mui/material/Paper'; import { iconButtonClasses } from '@mui/material/IconButton'; +import Box from '@mui/system/Box'; function checkHighlightIs(listbox, expected) { const focused = listbox.querySelector(`.${classes.focused}`); @@ -208,6 +209,39 @@ describe('', () => { checkHighlightIs(getByRole('listbox'), 'two'); }); + // https://github.com/mui/material-ui/issues/34998 + it('should scroll the listbox to the top when keyboard highlight wraps around after the last item is highlighted', function test() { + if (/jsdom/.test(window.navigator.userAgent)) { + this.skip(); + } + + const { getByRole } = render( + } + ListboxProps={{ style: { padding: 0, maxHeight: '100px' } }} + PopperComponent={(props) => { + const { disablePortal, anchorEl, open, ...other } = props; + return ; + }} + />, + ); + const textbox = getByRole('combobox'); + act(() => { + textbox.focus(); + }); + fireEvent.keyDown(textbox, { key: 'ArrowDown' }); + fireEvent.keyDown(textbox, { key: 'ArrowDown' }); + fireEvent.keyDown(textbox, { key: 'ArrowDown' }); + fireEvent.keyDown(textbox, { key: 'ArrowDown' }); + fireEvent.keyDown(textbox, { key: 'ArrowDown' }); + fireEvent.keyDown(textbox, { key: 'ArrowDown' }); + + checkHighlightIs(getByRole('listbox'), 'one'); + expect(getByRole('listbox')).to.have.property('scrollTop', 0); + }); + it('should keep the current highlight if possible', () => { const { getByRole } = render(