mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.17k stars 1.3k forks source link

[pickers] Let mask support variable number of digits #4760

Closed Filipeue closed 1 year ago

Filipeue commented 3 years ago

checkMaskIsValidForCurrentFormat is not respecting formats with variable number of digits https://github.com/mui-org/material-ui/blob/e0cdcd130db60d252c4382570844ea7278649a08/packages/mui-lab/src/internal/pickers/text-field-helper.ts#L79

Current Behavior 😯

mask "__/__/____" is marked as invalid if it doesn't match "_/_/____" and "__/__/____"

Expected Behavior πŸ€”

mask "__/__/____" is marked as invalid if it doesn't match "_/_/____" or "__/__/____"

Steps to Reproduce πŸ•Ή

Follow the link and open console https://codesandbox.io/s/loving-monad-zut3e?file=/src/Demo.tsx

Context πŸ”¦

I am using default DatePicker with LocalizationProvider (date-fns adapter). It uses format(new Date(), "P") under the hood to get utils.formats.keyboardDate. So the dates rendering should be localized and masks automatically generated. But I am getting warning "The mask "__/__/____" you passed is not valid for the format used P. Falling down to uncontrolled not-masked input." Even if I use my own mask respecting the localized format warning persists. So we have 2 issues:

  1. Masks are not generated according to locale settings (https://github.com/mui-org/material-ui/issues/28871)
  2. Masks with variable digits raise warning and disable masked input

Your Environment 🌎

`npx @mui/envinfo` ``` System: OS: Windows 10 10.0.19043 CPU: (4) x64 Intel(R) Core(TM) i5-6300HQ CPU @ 2.30GHz Memory: 1.30 GB / 19.89 GB Binaries: Node: 14.17.3 - C:\Program Files\nodejs\node.EXE npm: 6.14.13 - C:\Program Files\nodejs\npm.CMD Managers: pip3: 21.1.3 - D:\Program Files\Programs\Python\Python39\Scripts\pip3.EXE Utilities: Git: 2.32.0. Virtualization: Docker: 20.10.8 - C:\Program Files\Docker\Docker\resources\bin\docker.EXE SDKs: Windows SDK: AllowDevelopmentWithoutDevLicense: Enabled Versions: 10.0.19041.0 IDEs: VSCode: 1.60.0 - C:\Program Files\Microsoft VS Code\bin\code.CMD Languages: Bash: 5.0.17 - C:\Windows\system32\bash.EXE Python: 3.9.6 Browsers: Edge: Spartan (44.19041.1023.0), Chromium (94.0.992.38) Internet Explorer: 11.0.19041.1202 ```
Tevvek commented 3 years ago

I believe something similar to be happening when displaying dates that are text i.e. "12 October, 2021". On migrating to version 5, I transformed:

import { DatePicker as MuiDatePicker } from "@material-ui/pickers";

<MuiDatePicker
    format="D MMMM, YYYY"
    value={value || null}
    onChange={handleChange}
    autoOk
    {...other}
/>;

into:

import { DatePicker as MuiDatePicker } from "@mui/lab";

<MuiDatePicker
  inputFormat="D MMMM, YYYY"
  value={value || null}
  onChange={handleChange}
  disableCloseOnSelect={true}
  renderInput={(params) => <TextField {...params} />}
  {...other}
/>;

but started getting: The mask "__/__/____" you passed is not valid for the format used DD MMMM, YYYY. Falling down to uncontrolled not-masked input.

Even with the mask: __ ___, ____ for a fixed but text format i.e. "12 Oct, 2021" it generates the warning.

I ended up disabling it disableMaskedInput={true} for the moment.

msalahz commented 3 years ago

I'm getting the same warning and @Tevvek 's workaround / suggestion by setting disableMaskedInput={true} worked for me.

Filipeue commented 3 years ago

I'm getting the same warning and @Tevvek 's workaround by setting disableMaskedInput={true} worked for me.

@msalahz disabling discussed feature shouldn't be considered workaround πŸ€”

msalahz commented 3 years ago

Agreed @Filipeue!

Manibhatt commented 2 years ago

Any Solution for this issue, as this warning, occurs on dynamic locale date format especially in case of en-us: 'M/dd/yyyy' where the part of the format is a single digit.

krip4ik commented 2 years ago

Same issue, this is the bug in native code. Regex should be different from /[\d]/gi image

alexfauquette commented 2 years ago

This issue is related to #4487

It is not a bug, be an enhancement. Mask does not support variable number of digits to avoid edge cases such as the user enters "01/03/1" and then it switches to "1/3/1" because the date engine recognized Date(0001, 3, 1) which will be formatted

The portion of code which has been pointed is here to inactivate mask if your format has variables digit number

flaviendelangle commented 1 year ago

I am closing this issue.

We recently launched the first beta of @mui/x-date-pickers and @mui/x-date-pickers-pro v6.x. This new version contains a full rework of the input editing. You can have a look at the v6 doc which is currently in beta and the related blog post.

We won't apply complicated (and not always doable) fixes to the v5 version, I hope this new version solves your problem.