[pickers] Implement out-of-the-box behavior to clear input

[yanickrochon]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

I see this statement at multiple places in the documentation, but this feature seems to be completely missing in the code.

Note that showClearButton has a higher priority.

Examples 🌈

Demo

// the clearable property does not change anything in the component
<DatePicker
        clearable
        showTodayButton
        label="Basic example"
        value={value}
        onChange={(newValue) => {
          setValue(newValue);
        }}
        renderInput={(params) => <TextField {...params} />}
/>

Motivation 🔦

The ability to clear the field is trivial, but essential in certain cases.

[flaviendelangle]

Not sure to understand the issue here
In your example, you have the clearable props and it shows the Clear button instead of the Today button.

Do you just mean that the doc should say Note that 'clearable' has a higher priority. ?

[yanickrochon]

@flaviendelangle I eventually saw the clear button within the popup, but this is not what initially prompted me to create this issue. What prompted me was a failure to understand how MUI actually implements Material Design guidelines for picker components.

More specifically, the design describres two properties, first :

Icon signifier
Icons describe the type of input a text field requires. They are displayed to the left of the text field.

Icons can also be touch targets for nested components. For example, a calendar icon may be tapped to reveal a date picker.

And, second :

Clear button
Clear buttons let users empty an entire input field.

They are right justified in the field.

However, MUI's design is this one :

I was expecting the input to be clearable without having to open the popup. I was expecting what the specification states.

[flaviendelangle]

Oh right, we were talking about two distinct subjects

So your point would be to add a reset icon at the right of the field when "clearable = true" ?

The pickers have just been moved to our team, so we are still catching up with the existing codebase.
For the difference between the our pickers and the Material UI specification, we will have to decide if we want to follow the specification more strictly or keep these differences.

[yanickrochon]

I understand, and I have noticed that very few UI frameworks actually follow the actual Material specifications in regards to user input elements. I have also noticed discrepancies between various component implementations as well (e.g. the Select and Autocomplete have very different APIs even if they mainly offer the same visual styles and UX)

In the case of of the Date/Time pickers, I was expecting the clear button to be visible without requiring extra steps to access the functionality. In my engineering classes (over a decade ago, perhaps, but I still remember the recommendations about heurisitcs and user interactions), this kind of design flaw was highlighted a few times.

But, most importantly, even MUI correctly implements the clear button elsewhere! The Search input field does follow the specification :

So, my point is, unless MUI actually follows a design standard, it will quickly become a mess and frustrate both users and devs. Points to consider.

[flaviendelangle]

For Select / Autocomplete, I think that Autocomplete is a lot more recent and that Select may evolve closer from the Autocomplete API in the future (don't take my word for it, I never worked on it).

---

For the reset button, I will have a look at the other component (thanks for the search example).
Switching the toggle icon to the left and add a reset icon should be easy.

---

For the following of the specification in general. The team behind https://github.com/mui-org/material-ui is building a new design system and the foundations to handle several design systems with the same unstyled bricks.
It is still not very clear how the our X components should play with those design systems, but we should aim at staying consistent. The pickers have been under-maintained because of the time required vs the time the team had, but we should be able to work a lot more on them now.

[yanickrochon]

I understand the time this all requires. Thank you for taking some time to address my concerns.

[zigang93]

it is possible to use useRef to picker and try to reset the value from picker?
because I am trying to reset the DateRangePicker from other button with onClick method

[flaviendelangle]

@zigang93 could you give me a reproduction case ?
And if this is not directly related to this issue, create a new one to keep the discussions separated 👍

[yanickrochon]

@zigang93 take a look at issue #4479

[alexfauquette]

Just to bring some information about the clear button at the end of the search input. The cross you see is not implemented by MUI

If <input/> has that parameter type="search" chrome automatically adds a clear icon that is not an MUI icon. It can be targeted with ::-webkit-search-cancel-button (most of the dime to remove it)

On the same demo you can see that the freeSolo has the same behavior but here it is handled by MUI. The button has the same style as other

From the behavior of AutoComplet we could do something like that:
https://codesandbox.io/s/basicdatepicker-material-demo-forked-i8jcm6?file=/demo.tsx

[mickbigblue]

Is there a way to get the clearable prop working in "DesktopDateTimePicker", too?
There is nothing in the API-Docs here:
https://mui.com/x/api/date-pickers/desktop-date-time-picker/

[flaviendelangle]

The demo from @alexfauquette above should probably work for DesktopDateTimePicker to
And for a built-in integration, if we do it for the DatePicker we should do it for others as well

[mickbigblue]

Ok, now I got it, there is no built-in integration via a simple clearable prop...

Do I also have to reference that

    "@mui/x-date-pickers": "https://pkg.csb.dev/mui/mui-x/commit/fe427090/@mui/x-date-pickers",

in the package.json or can I just use the latest @mui/x-date-pickers?

[flaviendelangle]

You can use a recent version
This weird install line is to reference to a specific commit to demonstrate something not published yet, but it should not be used in production.

[mickbigblue]

All right. I'll look into it. Thanks!

[Cirelion]

Is there any update on a rough timeline for when this will be implemented? The Mui-lab datepicker has this functionality but I'd prefer to more over to mui-x as I'm getting deprecation warnings.

[flaviendelangle]

Hi,

Could you describe how you were enabling the clear behavior on the lab ?
Are we talking about the clear icon on the input or the clear button in the view ?
This issue talks about the clear icon on the input (which I think we never supported).
For the clear button, you have a deprecation warning if you use the old api but you should be able to follow the instructions and migrate to the new API.

[Cirelion]

Ah apologies, the clear button from mui/lab appears in the modal view not the input directly.

[Lucas-Henrique-Lopes-Costa]

any news about this feature?

[LukasTy]

any news about this feature?

Thank you for being interested in this feature. 🙏
We are in the final stages of refining the PR. If all goes well, we hope to release it in the coming weeks. 🤞

[michelengelen]

@Lucas-Henrique-Lopes-Costa It will be included in the next release (6.16.0) 🚀