[Select][material-ui] Merge slotProps.paper with internal Paper props (…

…#38703)
mui · Aug 30, 2023 · 498bd93 · 498bd93
1 parent db09648
commit 498bd93
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 5 deletions.
diff --git a/packages/mui-material/src/Select/Select.test.js b/packages/mui-material/src/Select/Select.test.js
@@ -835,6 +835,24 @@ describe('<Select />', () => {
 
       expect(getByTestId('paper').style).to.have.property('minWidth', '12px');
     });
+
+    // https://github.com/mui/material-ui/issues/38700
+    it('should merge `slotProps.paper` with the default Paper props', function test() {
+      if (/jsdom/.test(window.navigator.userAgent)) {
+        this.skip();
+      }
+
+      const { getByTestId, getByRole } = render(
+        <Select MenuProps={{ slotProps: { paper: { 'data-testid': 'paper' } } }} open value="10">
+          <MenuItem value="10">Ten</MenuItem>
+        </Select>,
+      );
+
+      const paper = getByTestId('paper');
+      const selectButton = getByRole('button', { hidden: true });
+
+      expect(paper.style).to.have.property('minWidth', `${selectButton.clientWidth}px`);
+    });
   });
 
   describe('prop: SelectDisplayProps', () => {

diff --git a/packages/mui-material/src/Select/SelectInput.js b/packages/mui-material/src/Select/SelectInput.js
@@ -482,6 +482,11 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
 
   const classes = useUtilityClasses(ownerState);
 
+  const paperProps = {
+    ...MenuProps.PaperProps,
+    ...MenuProps.slotProps?.paper,
+  };
+
   return (
     <React.Fragment>
       <SelectSelect
@@ -547,11 +552,13 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
           disableListWrap: true,
           ...MenuProps.MenuListProps,
         }}
-        PaperProps={{
-          ...MenuProps.PaperProps,
-          style: {
-            minWidth: menuMinWidth,
-            ...(MenuProps.PaperProps != null ? MenuProps.PaperProps.style : null),
+        slotProps={{
+          paper: {
+            ...paperProps,
+            style: {
+              minWidth: menuMinWidth,
+              ...(paperProps != null ? paperProps.style : null),
+            },
           },
         }}
       >