Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Autocomplete] Fix keyboard navigation when using custom popover #35160

Merged
merged 8 commits into from Nov 21, 2022
Merged

[Autocomplete] Fix keyboard navigation when using custom popover #35160

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
c789ca6
added position relative to AutocompleteListbox
sai6855 Nov 15, 2022
e8afec3
updated test case
sai6855 Nov 15, 2022
8cb6955
updated test
sai6855 Nov 15, 2022
106c097
updated test case
sai6855 Nov 16, 2022
e792d80
made arrow function to use "function keyword"
sai6855 Nov 16, 2022
3e50385
removed enter key from test
sai6855 Nov 16, 2022
cadca1f
spscing in test file
sai6855 Nov 16, 2022
d851146
fix code spacing in test file
sai6855 Nov 16, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/mui-material/src/Autocomplete/Autocomplete.js
View file
Open in desktop
Expand Up @@ -280,6 +280,7 @@ const AutocompleteListbox = styled('div', {
padding: '8px 0',
maxHeight: '40vh',
overflow: 'auto',
position: 'relative',
[`& .${autocompleteClasses.option}`]: {
minHeight: 48,
display: 'flex',
Expand Down
34 changes: 34 additions & 0 deletions packages/mui-material/src/Autocomplete/Autocomplete.test.js
View file
Open in desktop
Expand Up @@ -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}`);
Expand Down Expand Up @@ -208,6 +209,39 @@ describe('<Autocomplete />', () => {
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(
sai6855 marked this conversation as resolved.
Show resolved Hide resolved
<Autocomplete
open
options={['one', 'two', 'three', 'four', 'five']}
renderInput={(params) => <TextField {...params} />}
ListboxProps={{ style: { padding: 0, maxHeight: '100px' } }}
PopperComponent={(props) => {
const { disablePortal, anchorEl, open, ...other } = props;
return <Box {...other} />;
}}
/>,
);
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' });

sai6855 marked this conversation as resolved.
Show resolved Hide resolved
checkHighlightIs(getByRole('listbox'), 'one');
expect(getByRole('listbox')).to.have.property('scrollTop', 0);
});

it('should keep the current highlight if possible', () => {
const { getByRole } = render(
<Autocomplete
Expand Down