From 796861163aca29548aec58ce0944520907395a2b Mon Sep 17 00:00:00 2001 From: sai chand <60743144+sai6855@users.noreply.github.com> Date: Sat, 4 Jan 2025 00:56:34 +0530 Subject: [PATCH 01/11] [material-ui][Select] Add missing root class (#44928) --- packages/mui-material/src/Select/Select.js | 10 +++++++++- packages/mui-material/src/Select/Select.test.js | 15 +++++++++++++++ 2 files changed, 24 insertions(+), 1 deletion(-) diff --git a/packages/mui-material/src/Select/Select.js b/packages/mui-material/src/Select/Select.js index d32ac5cf7eca0b..d6af420e277874 100644 --- a/packages/mui-material/src/Select/Select.js +++ b/packages/mui-material/src/Select/Select.js @@ -3,6 +3,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import deepmerge from '@mui/utils/deepmerge'; +import composeClasses from '@mui/utils/composeClasses'; import getReactElementRef from '@mui/utils/getReactElementRef'; import SelectInput from './SelectInput'; import formControlState from '../FormControl/formControlState'; @@ -16,11 +17,18 @@ import { useDefaultProps } from '../DefaultPropsProvider'; 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 }; }; const styledRootConfig = { diff --git a/packages/mui-material/src/Select/Select.test.js b/packages/mui-material/src/Select/Select.test.js index 50e2a07eab3667..3dc42c37d9473c 100644 --- a/packages/mui-material/src/Select/Select.test.js +++ b/packages/mui-material/src/Select/Select.test.js @@ -1757,6 +1757,21 @@ describe(' + + None + + Ten + Twenty + Thirty + , + ); + + expect(container.querySelector(`.${classes.root}`)).not.to.equal(null); + }); + it('should merge the class names', () => { const { getByTestId } = render( ', () => { expect(getByRole('combobox', { hidden: true })).to.have.attribute('aria-controls', listboxId); }); + it('does not set aria-controls when closed', () => { + const { getByRole } = render(); diff --git a/packages/mui-material/src/Select/SelectInput.js b/packages/mui-material/src/Select/SelectInput.js index fd48bd5d44b08d..a1acee8485330f 100644 --- a/packages/mui-material/src/Select/SelectInput.js +++ b/packages/mui-material/src/Select/SelectInput.js @@ -497,7 +497,7 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) { ref={handleDisplayRef} tabIndex={tabIndex} role="combobox" - aria-controls={listboxId} + aria-controls={open ? listboxId : undefined} aria-disabled={disabled ? 'true' : undefined} aria-expanded={open ? 'true' : 'false'} aria-haspopup="listbox"