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

[Joy] Autocomplete scroll #37217

Merged
merged 9 commits into from
May 16, 2023
Merged

[Joy] Autocomplete scroll #37217

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
87e870e
initial fix
sai6855 May 9, 2023
9b26053
test name
sai6855 May 9, 2023
b5ddece
added logs
sai6855 May 15, 2023
e335d9e
fix logs
sai6855 May 15, 2023
3f55521
testing logs with older logic
sai6855 May 15, 2023
514580d
clear logs
sai6855 May 15, 2023
1a9c373
clear logs
sai6855 May 15, 2023
6cfbcd4
use fragment
sai6855 May 15, 2023
37add15
removed comments
sai6855 May 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions packages/mui-base/src/useAutocomplete/useAutocomplete.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -348,7 +348,10 @@ export default function useAutocomplete(props) {
prev.classList.remove(`${unstable_classNamePrefix}-focusVisible`);
}

const listboxNode = listboxRef.current.parentElement.querySelector('[role="listbox"]');
let listboxNode = listboxRef.current;
if (listboxRef.current.getAttribute('role') !== 'listbox') {
listboxNode = listboxRef.current.parentElement.querySelector('[role="listbox"]');
}

// "No results"
if (!listboxNode) {
Expand Down Expand Up @@ -568,7 +571,7 @@ export default function useAutocomplete(props) {

const handleListboxRef = useEventCallback((node) => {
setRef(listboxRef, node);

// console.log(node);
if (!node) {
return;
}
Expand Down
42 changes: 42 additions & 0 deletions packages/mui-joy/src/Autocomplete/Autocomplete.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@ import Autocomplete, {
import AutocompleteListbox from '@mui/joy/AutocompleteListbox';
import Chip, { chipClasses } from '@mui/joy/Chip';
import ChipDelete from '@mui/joy/ChipDelete';
import Select from '@mui/joy/Select';
import Option from '@mui/joy/Option';
import { ThemeProvider, styled } from '@mui/joy/styles';

function checkHighlightIs(listbox: HTMLElement, expected: string | null) {
Expand Down Expand Up @@ -1288,6 +1290,46 @@ describe('Joy <Autocomplete />', () => {
});

describe('prop: options', () => {
it('should scroll selected option into view when multiple elements with role as listbox available', function test() {
if (/jsdom/.test(window.navigator.userAgent)) {
this.skip();
}
render(
<React.Fragment>
<Autocomplete
defaultValue={'six'}
options={['one', 'two', 'three', 'four', 'five', 'six']}
slotProps={{
listbox: {
'data-testid': 'autocomplete-listbox',
sx: {
height: '40px',
},
},
input: {
'data-testid': 'autocomplete-input',
},
}}
autoFocus
/>
<Select defaultValue="1">
Copy link
Contributor Author

@sai6855 sai6855 May 15, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Focused option not scrolled into view is happening only when multiple elements with role listbox are rendered, hence added Select in the test

<Option value="1">1</Option>
<Option value="2">2</Option>
</Select>
</React.Fragment>,
);
const autocompleteInput = screen.getByTestId('autocomplete-input');

act(() => {
autocompleteInput.focus();
});
fireEvent.keyDown(autocompleteInput, { key: 'ArrowDown' });

const autocompleteListbox = screen.getByTestId('autocomplete-listbox');

checkHighlightIs(autocompleteListbox, 'six');
expect(autocompleteListbox.scrollTop).to.greaterThan(0);
});
it('should keep focus on selected option and not reset to top option when options updated', () => {
const { setProps } = render(<Autocomplete open options={['one', 'two']} autoFocus />);
const textbox = screen.getByRole('combobox');
Expand Down