[RFC] Improving DX of masked input

[alexfauquette]

The Month and Year picker

Current behavior

For now, the masked input is managed by 4 props:

• inputFormat which indicates how the date should be formatted
• mask The expected shape '__/____' where each '_' is a slot for an accepted character
• acceptRegex a Regexp allowing to define which characters are accepted to fill _ slots. Most of the time /\dap/gi or /\d/gi to allow 'a', 'p' when writing AM/PM times
• disableMaskedInput simply disable the mask, user can do whatever they want

This feature is important for keyboard interaction because, without a mask, it's easy to miss a space or use a / instead of a - which will lead to an invalid date, so we discourage using disableMaskedInput={true}

Those parameters are strongly linked together. Modifying inputFormat without mask does not make sens, and disableMaskedInput should be used only if it's impossible to provide a mask for the wanted inputFormat

This leads to the following weird behavior for developers: The default props for the date picker depend on the views provided:

// Only Year
mask: '____'
inputFormat: utils.formats.year

// Only Year and Month
disableMaskedInput: true
inputFormat: utils.formats.monthAndYear

// default
mask: '__/__/____'
inputFormat: utils.formats.keyboardDate

The main problem here is the "Year and Month" case, because it set by default disableMaskedInput to true

• This is mandatory because monthAndYear returns strings such as "Jan, 1" which are not supported by the mask engine
• This is unintended because when developers set a correct mask/inputFormat it still does not work, that have to add disableMaskedInput={false}

Proposed Solution

(A) Modify the format

Set a format MM/YYYY such as proposed in #4664

• Pro:
  • That's the best for the user experience with the keyboard
• Cons:
  • It breaks a bit more the local support (not all countries are used to putting month before year)
  • It requires some modification of date-io because for now, adapters do not allow to set months with digits

(B) Drop month and year

This feature set magically the inputFormat when developers only care about the month and the year. But it seems to do more damage than it helps, so we could remove the special case of month and years

• Pro:
  • The default value of disableMaskedInput will always be false
  • Developers can always set MM/YYYY with the appropriate mask if they want to remove the days in the format
• Cons:
  • It's a breaking change

(C) Group related variables

We could regroup all the variables in one object:

inputFormatManager={{ 
    mask: '____ __', 
    format: 'yyyy MMM',
    disableMask: false,
    acceptRegex: /\dap/gi, 
}}

The defaultized value would be as follow. The idea is to keep default acceptRegex because it's rare to have to change it, and add ap for AM/PM is easy to forget.

const defaultizedInputFormatManager = props.inputFormatManager ? {
  acceptRegex: defaultInputFormatManager.acceptRegexp,
  ...props.inputFormatManager
} : defaultInputFormatManager

• Pro:
  • We materialize that those props are deeply linked together
  • Developers providing an accurate format/mask will automatically set disableMask to undefined
• Cons:
  • Some pickers keep disableMaskedInput=true
  • parameters are in an object which is not the easiest to document in API pages

(D) Have a special behavior when mask/format is provided

Same as option (C) but without grouping everything in a JS object. The default value would be computed as follow:

// Only Year and Month
disableMaskedInput: (mask || inputFormat) ? false : true
inputFormat:  inputFormat ?? utils.formats.monthAndYear

• Pro:
  • Developers providing an accurate format/mask will automatically set disableMask to false
• Cons:
  • Some pickers keep disableMaskedInput=true

---

I put other pain points below because they can have an influence on how we resolve the one above

The locale management #4756

Current behavior

The mask is set by default, lives in Europe or America with __/__/____ date mask. Spoiler: it's not the case, some locales set the year first leading to a mask ____/__/__

Proposed modification

remove the mask and use the inputFormat to compute it.

Managing more masks

Current behavior

The masked input support format with fix length and only digits. This excludes formats such as 1/2/2025 (because the number of digits can be 1 or 2 for months and days) or Jun 2012 because it uses letters (even if number of letters is fix).

Objective

Support mask for those, with mask such as [1or2digitsDay]/[1or2digitsMonth]/[year] Not sure if it is possible

[alexfauquette]

What is done by others

• react-day-picker: Nothing. If your input does not match the requested format, it just set the date to undefined. Same behavior in most libraries.
• Booking and Airbnb: The textfield is in fact a button. You can not enter text.
• Google flight: You can enter whatever you want. The formating is done after you leave/validate the field
• kendoUI: allows flexible input format. When the input has focus, it selected a slot (day, month or year) user can only edit the selected slot, and move between them by pressing left/right arrows

[alexfauquette]

• first solution: control the selection such that the user can only modify one digit https://codesandbox.io/s/basictextfields-demo-material-ui-forked-iizr1c?file=/demo.tsx

• second solution: control the selection such that the user can only modify one piece (day/month/year) at the time TODO

[alexfauquette]

Move to #5504