From 99a1b85763a765364ae2a94ba77b088b95a27e35 Mon Sep 17 00:00:00 2001
From: Diego Andai <diego@mui.com>
Date: Wed, 27 Sep 2023 07:31:16 -0300
Subject: [PATCH] [material-ui][Select] Fix MenuProps slotProps forwarding
 (#39177)

---
 packages/mui-material/src/Menu/Menu.d.ts      | 25 ++-----------------
 .../mui-material/src/Select/Select.spec.tsx   | 17 +++++++++++++
 .../mui-material/src/Select/Select.test.js    | 25 +++++++++++++++++++
 .../mui-material/src/Select/SelectInput.js    |  1 +
 4 files changed, 45 insertions(+), 23 deletions(-)

diff --git a/packages/mui-material/src/Menu/Menu.d.ts b/packages/mui-material/src/Menu/Menu.d.ts
index b06f442674a3e3..16e78dd1cd12e3 100644
--- a/packages/mui-material/src/Menu/Menu.d.ts
+++ b/packages/mui-material/src/Menu/Menu.d.ts
@@ -1,16 +1,14 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
-import { MenuOwnerState, SlotComponentProps } from '@mui/base';
 import { InternalStandardProps as StandardProps } from '..';
-import Paper, { PaperProps } from '../Paper';
+import { PaperProps } from '../Paper';
 import { PopoverProps } from '../Popover';
 import { MenuListProps } from '../MenuList';
 import { Theme } from '../styles';
 import { TransitionProps } from '../transitions/transition';
 import { MenuClasses } from './menuClasses';
 
-export interface MenuProps
-  extends StandardProps<Omit<PopoverProps, 'slots' | 'slotProps'>, 'children'> {
+export interface MenuProps extends StandardProps<PopoverProps> {
   /**
    * An HTML element, or a function that returns one.
    * It's used to set the position of the menu.
@@ -60,25 +58,6 @@ export interface MenuProps
    * `classes` prop applied to the [`Popover`](/material-ui/api/popover/) element.
    */
   PopoverClasses?: PopoverProps['classes'];
-  /**
-   * The components used for each slot inside.
-   *
-   * @default {}
-   */
-  slots?: {
-    root?: React.ElementType;
-    paper?: React.ElementType;
-  };
-  /**
-   * The extra props for the slot components.
-   * You can override the existing props or add new ones.
-   *
-   * @default {}
-   */
-  slotProps?: {
-    root?: SlotComponentProps<typeof Menu, {}, MenuOwnerState>;
-    paper?: SlotComponentProps<typeof Paper, {}, {}>;
-  };
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
diff --git a/packages/mui-material/src/Select/Select.spec.tsx b/packages/mui-material/src/Select/Select.spec.tsx
index c745a4b631ce46..25283d8a874054 100644
--- a/packages/mui-material/src/Select/Select.spec.tsx
+++ b/packages/mui-material/src/Select/Select.spec.tsx
@@ -58,4 +58,21 @@ function genericValueTest() {
       },
     },
   });
+
+  // tests deep slot prop forwarding up to the modal backdrop
+  <Select
+    MenuProps={{
+      slotProps: {
+        root: {
+          slotProps: {
+            backdrop: {
+              style: {
+                backgroundColor: 'transparent',
+              },
+            },
+          },
+        },
+      },
+    }}
+  />;
 }
diff --git a/packages/mui-material/src/Select/Select.test.js b/packages/mui-material/src/Select/Select.test.js
index 8668adf7ca8f22..90940c073741db 100644
--- a/packages/mui-material/src/Select/Select.test.js
+++ b/packages/mui-material/src/Select/Select.test.js
@@ -853,6 +853,31 @@ describe('<Select />', () => {
 
       expect(paper.style).to.have.property('minWidth', `${selectButton.clientWidth}px`);
     });
+
+    // https://github.com/mui/material-ui/issues/38949
+    it('should forward `slotProps` to menu', function test() {
+      const { getByTestId } = render(
+        <Select
+          MenuProps={{
+            slotProps: {
+              root: {
+                slotProps: {
+                  backdrop: { 'data-testid': 'backdrop', style: { backgroundColor: 'red' } },
+                },
+              },
+            },
+          }}
+          open
+          value="10"
+        >
+          <MenuItem value="10">Ten</MenuItem>
+        </Select>,
+      );
+
+      const backdrop = getByTestId('backdrop');
+
+      expect(backdrop.style).to.have.property('backgroundColor', 'red');
+    });
   });
 
   describe('prop: SelectDisplayProps', () => {
diff --git a/packages/mui-material/src/Select/SelectInput.js b/packages/mui-material/src/Select/SelectInput.js
index 90e5d4f25668a5..ec020a5a9e099c 100644
--- a/packages/mui-material/src/Select/SelectInput.js
+++ b/packages/mui-material/src/Select/SelectInput.js
@@ -554,6 +554,7 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
           ...MenuProps.MenuListProps,
         }}
         slotProps={{
+          ...MenuProps.slotProps,
           paper: {
             ...paperProps,
             style: {