[pickers] Fields do not foward the `slotProps` to the `TextField` component

[heath-freenome]

Steps to reproduce

Link to live example: https://codesandbox.io/p/sandbox/loving-james-ns3k5r

Steps:

1. Go to the code sandbox linked above
2. Notice that the DatePicker on the left does not have any of the features activated that the TextField on the right has

Current behavior

Now that TextField has deprecated its older xxxProps in favor of slotProps in MUI 6, I would expect that passing the textField slotProps in the DatePicker's slotProps would work. It does not. In other words in the following example, the TextField in the DatePicker does not look like the TextField outside of the date picker:

const textFieldProps = {
    label: "Foo",
    helperText: "Is this an error?",
    slotProps: {
      htmlInput: { placeholder: "slotProps work" },
      inputLabel: { shrink: true },
      input: { notched: false },
      formHelperText: { error: true },
    },
  };
  return (
    <div className="App">
      <LocalizationProvider dateAdapter={AdapterLuxon}>
        <DatePicker
          slotProps={{
            textField: textFieldProps,
          }}
        />
      </LocalizationProvider>
      <TextField {...textFieldProps} />
    </div>
  );

Expected behavior

The DatePicker DOES pass through the slotProps to the underlying TextField so that the two components look the same (with the addition of the date field picker end adornment)

Context

We just upgraded to MUI 6 and we are forced to use the deprecated fields rather than slotProps per the upgrade guide

Your environment

System: OS: macOS 14.6.1 Binaries: Node: 20.15.0 - ~/.nvm/versions/node/v20.15.0/bin/node npm: 10.7.0 - ~/.nvm/versions/node/v20.15.0/bin/npm pnpm: 9.0.6 - /opt/homebrew/bin/pnpm Browsers: Chrome: 129.0.6668.71 Edge: Not Found Safari: 17.6 npmPackages: @emotion/react: 11.13.3 => 11.13.3 @emotion/styled: 11.13.0 => 11.13.0 @mui/core-downloads-tracker: 6.1.1 @mui/icons-material: 6.1.0 => 6.1.0 @mui/material: 6.1.0 => 6.1.0 @mui/private-theming: 6.1.1 @mui/styled-engine: 6.1.1 @mui/system: 6.1.0 => 6.1.0 @mui/types: 7.2.17 @mui/utils: 6.1.0 => 6.1.0 @mui/x-date-pickers: 7.18.0 => 7.18.0 @mui/x-internals: 7.18.0 @types/react: 18.3.9 => 18.3.9 react: 18.3.1 => 18.3.1 react-dom: 18.3.1 => 18.3.1 typescript: 5.6.2 => 5.6.2

Search keywords: MUI6 slotProps

[heath-freenome]

NOTE, I just found this closed issue that may give some indication on where the problems originates

[heath-freenome]

Digging deeper, it also looks like DateField passes along it's own properties to TextField via the deprecated props. It seems like it should also be using slotProps for them as well

[flaviendelangle]

It seems like it should also be using slotProps for them as well

We can't use the new slotProps as long as we support older versions of @mui/material. Except if we have a way to distinguish between the two @mui/material version, but this would increase the typing complexity of some of our hooks and I'm not sure it's worth it.

We should indeed support forwarding slotProps passed by developpers. This topic is being discussed in #14284, I'm closing this issue to avoid duplicates :+1:

[github-actions[bot]]

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] We value your feedback @heath-freenome! How was your experience with our support team? We'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!

[Selfmade-RuLeZ]

In the mean time you can render it by yourself with the slots prop and a function. You should not use something like this as mentioned in the comment below. But you could use this approach and create a new functional Component

    <DatePicker
      slots={{
        textField: (props) => (
          <TextField
            {...props}
            error={!!error || props.error}
            helperText={error?.message}
          />
        ),
      }}
      {...otherProps}
    />

[flaviendelangle]

You should never pass inline slots, see this doc section for context