[pickers] input end adornment doesn't open date picker

[jbojcic1]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When input adornment is used, click on it does nothing.

Expected Behavior 🤔

Click on input adornment should open date picker

Steps to Reproduce 🕹

Example https://codesandbox.io/s/material-ui-issue-forked-fg7b4?file=/src/Demo.js

Steps:

1. open example
2. click on adornment icon and notice how nothing happens

[oliviertassinari]

@jbojcic1 Interesting, I see two wrong assumptions:

1. There is no InputProps prop. And if it's documented something, we should remove it.
2. Customizing the input end adornment should override its behavior not extend it.

I would propose two resolutions:

3. You can control the open state if you need to extend its behavior. You can use the open prop for that.
4. We can update the component to include a OpenPickerIcon key into the components prop to allow its customization.

Would you like to have 4?

[jbojcic1]

@oliviertassinari yes 4 would be great.

If I am not wrong InputProps was there in mui-pickers so I thought it will still be here and it worked so I used it. Also not sure if I missed it but I don't see date picker in the api section of https://next.material-ui.com/ so wasn't able to check exact api

Btw why doesn't mobile date picker have the calendar icon by default?

[oliviertassinari]

Btw why doesn't mobile date picker have the calendar icon by default?

On desktop, the input is the primary interaction area, the calendar icon opens a popup for a second modality.
On mobile, the input is not interactive, nor the popup. Instead, there is a modal that is triggered by the whole input.

[itscharlieliu]

Is anyone on this issue? If not can I take it?

[eps1lon]

Can you clarify what you're trying to do?

You can change the icon with openPickerIcon:

<DatePicker
  label="Basic example"
  value={value}
  onChange={(newValue) => {
    setValue(newValue);
  }}
  renderInput={(params) => <TextField {...params} />}
+ openPickerIcon={<CalendarTodayIcon />}
/>

If you want to listen to clicks on the open-picker-button you should be able to use OpenPickerButtonProps:

<DatePicker
  label="Basic example"
  value={value}
  onChange={(newValue) => {
    setValue(newValue);
  }}
  renderInput={(params) => <TextField {...params} />}
  openPickerIcon={<CalendarTodayIcon />}
+ OpenPickerButtonProps={{
+   onClick: () => console.log("click open picker button")
+ }}
/>

However, onClick seems to be ignored which is a bug.

@oliviertassinari I reverted your title change. Let's ask the issuer first what they want and dont put words in their mouth.

[oliviertassinari]

From what I understand of this issue of @jbojcic1, the objective is to replace the icon to match its design specs. This can already be done using the right API (openPickerIcon prop) without touching into the TextField rendering. We could already close the issue there.

However, there are two weird things, and we might want to push the solution further, hopefully avoiding other developers falling into it:

1. The InputProps prop. it doesn't seem to make sense, developers have the renderInput prop to customize it without an indirection. But maybe it's meant for the mobile text input that renders in the dialog?
2. The inconsistency in the API. The openPickerIcon prop is going against [RFC] What's the best API to override deep/nested elements? #21453 (two ways to do the same thing) and the API we are putting in place for the other components (e.g data grid). I propose we replace this prop with a new key in the components prop.

https://github.com/mui-org/material-ui/blob/205258b56faf4ac8096d10b62e22458dab52fb8e/packages/material-ui-lab/src/StaticDatePicker/StaticDatePicker.tsx#L101-L113

[eps1lon]

so I proposed to remove it.

You did not do any such thing. Like please form an opinion first and then try to find a solution. This "I'm doing X" and then you come up with a justification is clearly not working for you.

[oliviertassinari]

You are right, the tense is not correct. I proposed I propose.

[oliviertassinari]

Closing as a solution was provided in #24511 (comment).

[jbojcic1]

@oliviertassinari @eps1lon so what I wanted is a way to have a custom datepicker icon and and that click/tap on it opens the datepicker

[Vishal1419]

Can you clarify what you're trying to do?

You can change the icon with openPickerIcon:

<DatePicker
  label="Basic example"
  value={value}
  onChange={(newValue) => {
    setValue(newValue);
  }}
  renderInput={(params) => <TextField {...params} />}
+ openPickerIcon={<CalendarTodayIcon />}
/>

If you want to listen to clicks on the open-picker-button you should be able to use OpenPickerButtonProps:

<DatePicker
  label="Basic example"
  value={value}
  onChange={(newValue) => {
    setValue(newValue);
  }}
  renderInput={(params) => <TextField {...params} />}
  openPickerIcon={<CalendarTodayIcon />}
+ OpenPickerButtonProps={{
+   onClick: () => console.log("click open picker button")
+ }}
/>

However, onClick seems to be ignored which is a bug.

@oliviertassinari I reverted your title change. Let's ask the issuer first what they want and dont put words in their mouth.

@oliviertassinari as mentioned by @eps1lon onClick seems to be ignored. Can you please suggest any alternative solution till the bug gets resolved?