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

[Select]Bug when the first child is a ListSubheader #27299

Merged
merged 13 commits into from
Apr 11, 2022
Merged

[Select]Bug when the first child is a ListSubheader #27299

Changes from 2 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
8f97e85
Now check if the child is an option with value, and set the second op…
DouglasPds Jul 15, 2021
247e7fe
Merge branch 'next' into bug/listSubheader-not-navigate-with-arrow
DouglasPds Jul 15, 2021
3e2d580
Adding test to check the usability of the arrow when the ListSubheade…
DouglasPds Jul 20, 2021
5a970c5
Correcting test_types to circleci
DouglasPds Jul 20, 2021
52130ee
Merge with master
DouglasPds Mar 2, 2022
d028882
Deleting the file Select.test.js of material-ui, and passing my test …
DouglasPds Mar 2, 2022
5f197e1
Returning the GroupedSelect docs to the previous value
DouglasPds Mar 3, 2022
f966267
Improving the readability of the test name and checking when the firs…
DouglasPds Mar 3, 2022
408d3a0
Created a function to check which is the first selectable element, to…
DouglasPds Mar 3, 2022
9a45a10
Changing also the GroupedSelected typescript file
DouglasPds Mar 3, 2022
26a47e9
Merge branch 'master' into bug/listSubheader-not-navigate-with-arrow
DouglasPds Mar 31, 2022
efffa1f
Preventing an unnecessary arr.find
DouglasPds Mar 31, 2022
36402c8
Adding a test to check two headers at the top of the Select
DouglasPds Mar 31, 2022
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
18 changes: 16 additions & 2 deletions packages/material-ui/src/Select/SelectInput.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -328,7 +328,7 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
}
}

const items = childrenArray.map((child) => {
const items = childrenArray.map((child, index, arr) => {
if (!React.isValidElement(child)) {
return null;
}
Expand Down Expand Up @@ -369,6 +369,20 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
foundMatch = true;
}

const hasOptionSelected = () => {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

And here, when you select an option don't need more to set the second option as selected true to gain the focus.

if (arr.find((item) => areEqualValues(value, item.props.value))) {
return selected;
}
return true;
};

if (child.props.value === undefined) {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This returns a different object when the option is a ListSubheader. The role option is because the role listbox of the Menu needs that the children have the role option, but when the option is not a selectable option the aria-selected should be omitted.

return React.cloneElement(child, {
'aria-readonly': true,
role: 'option',
});
}

return React.cloneElement(child, {
'aria-selected': selected ? 'true' : undefined,
onClick: handleItemClick(child),
Expand All @@ -385,7 +399,7 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
}
},
role: 'option',
selected,
selected: index === 1 && arr[0].props.value === undefined ? hasOptionSelected() : selected,
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Here when the first child is a ListSubheader it sets the selected true to the second option, to gains the focus when the list of options is open, with the tabindex = 0, to the arrow down works.

value: undefined, // The value is most likely not a valid HTML attribute.
'data-value': child.props.value, // Instead, we provide it as a data attribute.
});
Expand Down