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(