[Drawer]: `ModalProps.slotProps` broken with introduction `slotProps`

[kgregory]

Steps to reproduce

Steps:

1. Open this link to live example: https://stackblitz.com/edit/react-oda7qyqd-3t9qvtsb?file=Demo.tsx
2. Observe that ModalProps.slotProps.backdrop.id is set
3. Observe that the rendered backdrop has no id
4. Switch the demo to use 6.4.5
5. Observe that the rendered backdrop has an id

Current behavior

As noted in the original PR, ModalProps.slotProps.backdrop are not making it into slotProps.backdrop .

This no longer seems to apply the props to the backdrop:

          <Drawer
            anchor={anchor}
            open={state[anchor]}
            onClose={toggleDrawer(anchor, false)}
            ModalProps={{
              slotProps: {
                backdrop: {
                  id: 'where-has-my-id-gone',
                },
              },
            }}
          >

To fix this, the dev needs to now use slotProps.backdrop on the Drawer, but it's a breaking change.

Expected behavior

It should apply ModalProps.slotProps.backdrop to the backdrop.

Context

No response

Your environment

npx @mui/envinfo

  System:
    OS: Windows 11 10.0.26100
  Binaries:
    Node: 20.13.1 - C:\Program Files\nodejs\node.EXE
    npm: 10.5.2 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.10.0 - C:\Program Files\nodejs\pnpm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Chromium (133.0.3065.82)
  npmPackages:
    typescript: 5.7.3 => 5.7.3

Search keywords: Drawer, slotProps

[siriwatknp]

Thanks for the feedback but I believe that this is expected.

Based on your snippet:

<Drawer
  ModalProps={{
    slotProps: {
      backdrop: {
        id: 'where-has-my-id-gone',
      },
    },
  }}
>

You are mixing the deprecated props with the new slotProps. I recommend using slotProps from now on, so the code should be:

<Drawer
  slotProps={{
    backdrop: {
        id: 'where-has-my-id-gone',
      },
  }}
>

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@kgregory How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.

[kgregory]

Thanks for the feedback but I believe that this is expected.

Based on your snippet:

<Drawer
ModalProps={{
slotProps: {
backdrop: {
id: 'where-has-my-id-gone',
},
},
}}

You are mixing the deprecated props with the new slotProps. I recommend using slotProps from now on, so the code should be:

<Drawer
slotProps={{
backdrop: {
id: 'where-has-my-id-gone',
},
}}

Doesn't this mean that a patch release has introduced a breaking change?