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

[material-ui][Select] Apply missing root class #42975

Open
wants to merge 13 commits into
base: master
Choose a base branch
from
10 changes: 9 additions & 1 deletion packages/mui-material/src/Select/Select.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
import clsx from 'clsx';
import deepmerge from '@mui/utils/deepmerge';
import getReactNodeRef from '@mui/utils/getReactNodeRef';
import composeClasses from '@mui/utils/composeClasses';
import SelectInput from './SelectInput';
import formControlState from '../FormControl/formControlState';
import useFormControl from '../FormControl/useFormControl';
Expand All @@ -16,11 +17,18 @@ import useThemeProps from '../styles/useThemeProps';
import useForkRef from '../utils/useForkRef';
import { styled } from '../zero-styled';
import rootShouldForwardProp from '../styles/rootShouldForwardProp';
import { getSelectUtilityClasses } from './selectClasses';

const useUtilityClasses = (ownerState) => {
const { classes } = ownerState;

return classes;
const slots = {
root: ['root'],
};

const composedClasses = composeClasses(slots, getSelectUtilityClasses, classes);

return { ...classes, ...composedClasses };
Copy link
Contributor Author

@sai6855 sai6855 Aug 8, 2024

Choose a reason for hiding this comment

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

This implementation is taken from here

...classes, // forward the focused, disabled, etc. classes to the ButtonBase
...composedClasses,
};
};
.

without spreading .MuiTablePagination-select isn't getting applied correctly and lead to argos errors like these https://app.argos-ci.com/mui/material-ui/builds/29939/99301860

};

const styledRootConfig = {
Expand Down
15 changes: 15 additions & 0 deletions packages/mui-material/src/Select/Select.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,21 @@ describe('<Select />', () => {
expect(container.querySelector('input')).to.have.property('value', '10');
});

it('should have root class', () => {
const { container } = render(
<Select value={10}>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>,
);

expect(container.querySelector(`.${classes.root}`)).not.to.equal(null);
});

specify('the trigger is in tab order', () => {
const { getByRole } = render(
<Select value="">
Expand Down