[material-ui][Select] Fix MenuProps slotProps forwarding (#39177)

mui · Sep 27, 2023 · 99a1b85 · 99a1b85
1 parent 0be321e
commit 99a1b85
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 23 deletions.
diff --git 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
@@ -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
@@ -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
@@ -554,6 +554,7 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
           ...MenuProps.MenuListProps,
         }}
         slotProps={{
+          ...MenuProps.slotProps,
           paper: {
             ...paperProps,
             style: {