[pickers] Handle `TextField` slots with `@mui/material@6`

[LukasTy]

After https://github.com/mui/mui-x/pull/14142 when using @mui/material@6 it will be possible to pass:

slotProps={{
  textField: {
    slotProps: {
      input: { /* some props */ }
    }
  }
}}

But they will be ignored until further changes.

The adoption of slots is slightly complex because we clearly don't want to use or have a select slot available and also need to adapt the changes for the PickersTextField component.

Related @mui/material PR: https://github.com/mui/material-ui/pull/42062.

Search keywords:

[heath-freenome]

From #14745

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.

Would adding a useSlotProps?: boolean flag that causes the components to pass things via slotProps be a good workaround for supporting one behavior (MUI6) vs the other (MUI5)

[flaviendelangle]

It could be tricky to have good TypeScript support if we introduce these kind of conditionally available props.

[kallebornemark]

Is the TS error that can be seen on this CSB related to this issue, or is it something else?

When I wrap a TimeFIeld component in styled, the type for slotProps becomes way more narrow, so e.g. input is no longer part of it.

[LukasTy]

Check old DOM structure and new. Conditionally pass necessary props based on detected @mui/material version. Consider passing InputProps/inputProps on <v6 and slotProps on >=v6.

[mjulstein]

If I want to use InputlabelProps I get a deprecation warning. If I use slotProps.inputLabel the props is put on the DOM element as "slotprops="[object, object]" and the props are ignored. If I replace the slot.textField with TextField the slot props works as expected, however entering a date with keyboard is no longer possible. The above is correct for mui-x pickers 8.5 and mui 7. In mui-x pickers 7 and mui 7 I could use the slotProps as expected.

[LukasTy]

@mjulstein Until we provide a solution that works on both Material versions, consider using the deprecated approach. 😉

If I want to use InputlabelProps I get a deprecation warning.

[LukasTy]

A preliminary solution to the conditional support is provided here: https://github.com/mui/mui-x/issues/14684#issuecomment-3088699701.

[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.