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.

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] Fix incorrect selecting of first element #36024

Merged
merged 9 commits into from
Feb 22, 2023
Next Next commit
Revert #27299 (but leave its tests)
michaldudak committed Feb 1, 2023
commit b365431f382ed2487d7867151740e53a035981de
27 changes: 2 additions & 25 deletions packages/mui-material/src/Select/SelectInput.js
Original file line number Diff line number Diff line change
@@ -350,7 +350,7 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
}
}

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

if (child.props.value === undefined) {
return React.cloneElement(child, {
'aria-readonly': true,
role: 'option',
});
}

const isFirstSelectableElement = () => {
if (value) {
return selected;
}
const firstSelectableElement = arr.find(
(item) => item?.props?.value !== undefined && item.props.disabled !== true,
);
if (child === firstSelectableElement) {
return true;
}
return selected;
};

return React.cloneElement(child, {
'aria-selected': selected ? 'true' : 'false',
onClick: handleItemClick(child),
@@ -427,10 +407,7 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
}
},
role: 'option',
selected:
arr[0]?.props?.value === undefined || arr[0]?.props?.disabled === true
? isFirstSelectableElement()
: selected,
selected,
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.
});