[pickers] It is no longer possible to override the placeholder value

[JcPires]

Steps to reproduce

V7.0.0

Link to live example:

316984930-05bd0e77-f7eb-4c63-ab60-5af0eea71229.mov

Steps:

1. Add a value for the placeholder in the slotProps object and the field key
2. The placeholder is not defined

This behavior worked in the previous version v6.19.8

Current behavior

If the developer enters a value for the placeholder is not correctly replaced in the final rendering

Expected behavior

If the developer enters a value for the placeholder it's correctly replaced in the final rendering

Context

No response

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: DatePicker

[michelengelen]

@JcPires I can confirm that this is a regression to v6.
I will add this to our board for the team to have a look!
Thanks for raising this! 🙇🏼

[heath-freenome]

@michelengelen Is there an ETA on when this might get fixed? It is breaking our tests which were relying on this feature

[flaviendelangle]

@heath-freenome It will at worse be released in one week 👍
There is a chance to add it to this week release, but I can't guarantee anything since it's already release day.

[LukasTy]

@JcPires, @heath-freenome do note that the field slot technically doesn't have such property.
Please use the slotProps.textField.placeholder instead, especially if you are in a TS environment.

[github-actions]

⚠️ This issue has been closed.
If you have a similar problem, please open a new issue and provide details about your specific problem.
If you can provide additional information related to this topic that could help future readers, please feel free to leave a comment.

How did we do @JcPires?
Your experience with our support team matters to us. If you have a moment, please share your thoughts through our brief survey.

[oskarkk]

If I understand correctly, overriding the placeholders in x-date-pickers v7 will only work with MUI v6? Can something be done to make it work with MUI v5? I want to use DateTimeRangePicker with MUI v5.

[LukasTy]

If I understand correctly, overriding the placeholders in x-date-pickers v7 will only work with MUI v6? Can something be done to make it work with MUI v5? I want to use DateTimeRangePicker with MUI v5.

@oskarkk could you clarify your question?
Are you asking if @mui/x-date-pickers v7 will only work with @mui/material v6?
If that's the question, then definitely no, we have an explicit peer dependency on a minimum required @mui/material v5 version. 😉

mui-x/packages/x-date-pickers/package.json

Line 60 in eb26547

"@mui/material": "^5.15.14",

[oskarkk]

@LukasTy I had a problem with placeholders not working with MUI v5.15.14, but it has magically started working, both in my code where I had the problem and in codesandbox, so I don't know. (In the tests added in the PR I saw "v6 only" so I was assuming that maybe I shouldn't use it with MUI v5.)

But there's still a smaller issue with placeholders in pickers v7: undefined or empty string doesn't remove placeholder, it still leaves the default "hh:mm" etc.

Here it's working with pickers v6: https://codesandbox.io/p/sandbox/clf85l

Not working with pickers v7: https://codesandbox.io/p/sandbox/mui-time-picker-placeholder-overrride-forked-zsyj9q

I can make a new issue with this if you want.

[LukasTy]

Here it's working with pickers v6: https://codesandbox.io/p/sandbox/clf85l

Not working with pickers v7: https://codesandbox.io/p/sandbox/mui-time-picker-placeholder-overrride-forked-zsyj9q

I can make a new issue with this if you want.

@oskarkk could you clarify what is not working specifically?
From your demos, I'd say that the @mui/x-date-pickers v6 demo has an "issue" of using the placeholder value of undefined, which is technically the same as not defined and "using" it to show no placeholder, whereas a correct approach of doing that would be an empty string "".
But, I can confirm—it does not seem to work as the existing solution doesn't account for the empty string case. 🙈

I'm opening this issue as it's directly related to it and the applied fix, thank you. 🙏

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

@JcPires: 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.

[oskarkk]

Thanks for the fast reaction and fix!