From 498bd936c793b4a18cbaea5587e6a0a9e723dc5e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@mui.com>
Date: Wed, 30 Aug 2023 09:04:13 +0200
Subject: [PATCH] [Select][material-ui] Merge slotProps.paper with internal
 Paper props (#38703)

---
 .../mui-material/src/Select/Select.test.js     | 18 ++++++++++++++++++
 .../mui-material/src/Select/SelectInput.js     | 17 ++++++++++++-----
 2 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/packages/mui-material/src/Select/Select.test.js b/packages/mui-material/src/Select/Select.test.js
index 6b8aa8a23bfd6a..0ee8903cc2cd83 100644
--- 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
index ba51fc1925035a..72452dc1d88857 100644
--- 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),
+            },
           },
         }}
       >