[pickers] Clearing date is not working as expected

[jalalmanafi]

Steps to reproduce

https://mui.com/x/react-date-pickers/date-picker/

Current behavior

No response

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: Mui Datepicker

[jalalmanafi]

Screen.Recording.2023-10-30.at.14.41.19.mov

[LukasTy]

Hello @jalalbmnf
Could you please clarify what you think is actually not working as expected? 🤔

The section selection is working very similarly to how the native date input behaves.

We also allow for both drag selecting and select all shortcut + delete clicking to clear the value.
Not to mention, that there is also an out-of-the-box option to enable additional clearable UI behavior.

All the options are showcased in the following video.

Screen.Recording.2023-10-30.at.13.21.51.mov

[jalalmanafi]

Also is there any way to use a custom input component? Without slots or slotProps properties

[jalalmanafi]

Hello @jalalbmnf Could you please clarify what you think is actually not working as expected? 🤔

The section selection is working very similarly to how the native date input behaves.

We also allow for both drag selecting and select all shortcut + delete clicking to clear the value. Not to mention, that there is also an out-of-the-box option to enable additional clearable UI behavior.

All the options are showcased in the following video.

Screen.Recording.2023-10-30.at.13.21.51.mov

You can check the DatePicker component on Mui Datepicker documentation, when I click on to Delete key it just removes Day, Month and Year still there

[LukasTy]

You can check the DatePicker component on Mui Datepicker documentation, when I click on to Delete key it just removes Day, Month and Year still there

And what would you expect to happen? 🤔
Your video showcases proper behavior - you remove what is selected.
I've linked the native date input behavior, which is exactly the same.

I'm re-uploading a different video because, in the original answer, I posted an incomplete showcase video.

Screen.Recording.2023-10-30.at.15.22.22.mov

Also is there any way to use a custom input component? Without slots or slotProps properties

No, there is no other option. Are you having problems with the slots approach? 🤔

[jalalmanafi]

You can check the DatePicker component on Mui Datepicker documentation, when I click on to Delete key it just removes Day, Month and Year still there

And what would you expect to happen? 🤔 Your video showcases proper behavior - you remove what is selected. I've linked the native date input behavior, which is exactly the same.

I'm re-uploading a different video because, in the original answer, I posted an incomplete showcase video.

Screen.Recording.2023-10-30.at.15.22.22.mov

Also is there any way to use a custom input component? Without slots or slotProps properties

No, there is no other option. Are you having problems with the slots approach? 🤔

I need to remove the date without a clear button, but I understand this thank you.

[jalalmanafi]

For the second question about slots I will prepare the video, to what is the problem

[jalalmanafi]

[jalalmanafi]

[jalalmanafi]

I copied this example from documentation but there is a error about clearable

[LukasTy]

@jalalbmnf Could you provide a live reproduction of the problem you are having?
A live example would be perfect. This codesandbox.io demo may be a good starting point.
Honestly, I'm most interested in the version of the package that you are using. 🤔

I struggle to understand, why you could be having this typing issue if you are on one of the latest package versions. 🤷

[jalalmanafi]

Just it is not working with the slots property and I start to use slotProps, now everything is okay, thank you so much for your effort 🙏🏼

[kgregory]

There doesn't appear to be a way to clear a mobile date picker:

Reproduction:

• View Clearing the value on mobile
• There is no clear button after selecting a value

[LukasTy]

There doesn't appear to be a way to clear a mobile date picker:

Such a feature was not tested and not implemented for mobile. If you would check the slots, you can see that the Mobile Picker variants do not have the ClearX slots as do the Desktop counterparts. 😉

Technically, it happens only because the Mobile pickers default to having the readOnly prop as true. If you would force it to false, then the behavior would be present, it just might not work as you would expect - the clearable button never disappears. 🤔

To reliably add this behavior to mobile, we need to move away from the fact that the Input is in readonly state on Mobile Pickers.
We have a separate issue (#7869) to tackle this.
I'll add a comment there to mention the fact that together with that proper clearable behavior has to be added as well. 👍

[kgregory]

Such a feature was not tested and not implemented for mobile. If you would check the slots, you can see that the Mobile Picker variants do not have the ClearX slots as do the Desktop counterparts. 😉

I see, I was only looking at DatePicker > Slots, which has a corresponding DatePicker Demo, which is linked from the mobile and desktop specific API docs, that does not indicate that some behavior is specific to desktop. Thanks for the clarification.

To reliably add this behavior to mobile, we need to move away from the fact that the Input is in readonly state on Mobile Pickers.
We have a separate issue (#7869) to tackle this.
I'll add a comment there to mention the fact that together with that proper clearable behavior has to be added as well. 👍

Thanks again! In the meantime, if anyone comes across this issue and wants something that works reasonably well, the WrappedDatePicker component in this codesandbox may be a suitable workaround for you. It consistently renders the clear button for both desktop and mobile (if the datepicker is clearable).

[LukasTy]

Thank you for providing a temporary solution @kgregory.
I quickly tested your solution and wanted to let you know a couple of issues I noticed:

1. The clearable behavior does not respect readOnly and disabled props;
2. Consider avoiding the stopPropagation calls whenever possible.

[kgregory]

Thank you for providing a temporary solution @kgregory. I quickly tested your solution and wanted to let you know a couple of issues I noticed:

1. The clearable behavior does not respect readOnly and disabled props;
2. Consider avoiding the stopPropagation calls whenever possible.

Thank you! This was biased toward my use case so I didn’t think to support those props. I will update it. I really appreciate you taking a look at this.

[lnhrdt]

Thanks again! In the meantime, if anyone comes across this issue and wants something that works reasonably well, the WrappedDatePicker component in this codesandbox may be a suitable workaround for you. It consistently renders the clear button for both desktop and mobile (if the datepicker is clearable).

@kgregory I've come arcross this issue looking for something that works reasonably but the codesandbox link isn't working. Do you have a fresh link?

---

There doesn't appear to be a way to clear a mobile date picker:

Such a feature was not tested and not implemented for mobile. If you would check the slots, you can see that the Mobile Picker variants do not have the ClearX slots as do the Desktop counterparts. 😉

@LukasTy that's so interesting it wasn't tested for mobile as it was developed! The DatePicker component accepts the field clearable slotProps, is the component used to demo the clearable behavior, and because it renders DesktopDatePicker or MobileDatePicker depending on the device it runs on I'd suggest the current behavior is a tripping hazard. I wasn't able to find an open issue for this, would it help if I opened one?

[LukasTy]

@lnhrdt Thank you for a good observation. 🙏
As mentioned here: #10842 (comment) the clearable behavior is somewhat tied with the mobile readOnly behavior. Therefore, we have planned to have proper clearable behavior on mobile together with #7869.
You can just go ahead and follow that issue for updates. 😉

[lnhrdt]

Hey @LukasTy! Having forgotten the context in this issue, today I got tripped up again by the date picker clearable behavior's lack of support for mobile paired with the docs's implication that it is supported on mobile.

I don't have the bandwidth to help finish the implementation for mobile (still subscribed to #7869) but I thought I'd at least help tighten up your docs so other users (perhaps even my future self) can more easily understand the limitations of the clearable behavior. Check out #13786.

[LukasTy]

@lnhrdt Thank you for your contribution, that is a great idea. 👍
I've re-prioritized grooming of the issue as well as added a waiting for 👍 label to the relevant issue for good measure. 😃