[pickers] Hide the placeholder when the field is `readOnly`

[imparvez]

Steps to reproduce

Link to live example: (required) https://codesandbox.io/p/sandbox/heuristic-silence-v8s6d3?file=%2Fsrc%2FDemo.tsx%3A26%2C28

Steps:

1. Implement a DateTimePicker
2. Focus on the input tag 3.You see a default placeholder in the input tag: MM/DD/YYYY hh:mm aa

Current behavior

What I'm trying to achieve is that is there is no value or date in DateTimePicker, it should display empty input tag instead of a default placeholder format.

Workaround I tried to pass empty placeholder in textField.placeholder and textField.inputProps.placeholder. Also adding localeText in the LocalizationProvider with empty value, as given in live example but there is some piece left // : and I think this is not a permanent solution to do things.

Let me know the workaround for this. Thanks

Expected behavior

No response

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: placeholder

[flaviendelangle]

Hi,

Could you elaborate on why you want to remove the placeholder from the input? It's not something we are currently supporting, the placeholder is always derived from the format of the date.

[imparvez]

@flaviendelangle : In the use case scenario, if there is no value in the date picker, the input field should remain empty. When a user attempts to focus or click inside the input tag, an empty input field is displayed. This approach is preferred over showing a default placeholder, as it provides users with the understanding that they can type in the field, even if it is set as read-only.

[flaviendelangle]

Unfortunately it's not compatible with how we handle editing in our field components. If when you focus / click on the input tag, the input remains empty, then you cannot select a section and start editing it.

If the problem is that read-only fields can be misleading and let people think they are editable, then we can have a look on how to improve this specific scenario. But when the field is not read-only, we need the placeholders for our editing approach. If you look at the browser input, it's how they work, you always have something displayed in the input so that you can click on a section and start editing it.

[imparvez]

Is there a workaround for now to hide the placeholder when it is read-only? I tried looking for different solutions but couldn't find one that best suits this scenario.

[flaviendelangle]

For version 6, the following example should work: https://codesandbox.io/s/date-and-time-pickers-forked-2nx7qv?file=/src/App.tsx

I'm removing the placeholder when the component is read only and the value when the component is read only and the value equals the placeholder (<=> when there is no date filled and the input is focused, we are rendering a value not a placeholder to allow to interact with the component so we need to remove it as well)

Is this the behavior you are describing?

[flaviendelangle]

@LukasTy I think we could discuss how to improve the default behavior of read only fields

[LukasTy]

I totally agree. There could be room for improvement. We did not do a revision on this regard after pivoting to the current behavior (showing placeholder/name while input is not focused). 🤔 Moving it to needs grooming. 😉

[MariaEduardaDaSilva]

Hello, I need to change my placeholder DateTimePicker and DateTime component to a Portuguese format 'dd/mm/aaaa hh:mm' and I can't find how to do it in the new v6.19.0.

I'm trying to pass in the slotProps and slots but it's not working:

slots={{
            textField: (props) => (
              <TextFieldBase
                node={node}
                settings={settings}
                value={value}
                valueEdited={valueEdited}
                textFieldProps={{
                  ...props,
                  inputProps: {
                    ...props.inputProps,
                    readOnly: editorEnabled,
                    placeholder: 'dd/mm/aaaa',
                  },
                  onBlur: () => undefined,
                }}
              />
            ),
          }}
          slotProps={{
            textField: {
              placeholder: 'dd/mm/aaaa',
              InputProps: {
                onSelect: () => {
                  setInputSelected(true)
                },
              },
            },
          }}

[flaviendelangle]

Hello,

If you are trying to change the placeholder of each date section without touching the element of the date edited (for example show "aaaa" for the year instead of "yyyy"), then you can have a look at this section

By the way, on all the MUI components, your slots should never be inlined, they are React component, if you define them in your render function, you will cause your component to remount on every render.