🐛 DatePicker - Input digits shifts when adding a new digit

[davidlep]

Adding an input in an already filled DatePicker results in an incoherent state.

Describe the bug

On an already filled DatePicker, modifying the content by adding a new input (for exemple, a single digit at the beginning) will result in the shifting of all the other values. In the case of the DatePicker, this creates an incoherent value since values of the day becomes values of the month and same for month and year.

Steps to reproduce

1. Input a valid value in the DatePicker, for exemple 13/07/2021
2. Add the single digit "2" at the beginning of the DatePicker input
3. The values of the DatePickers shifts the the right, and trims the last value, resulting in the incoherent value: 21/30/7202

Expected results

There is potentiality multiple ways to address this behaviour, but I would expect the DatePicker to remain valid. When I select the section of the Day, I would expect the other section Month and Year to stay unaffected.

An expected result could be: 23/07/2021 (replacing the first digit)

Reproducible demo

[patricklafrance]

We experimented with a native date input and we think we might to able to use it instead of our custom ask code. Native date input would fix this bug as well.

We would have to remove the native date input calendar for now though because it's very hard to get it to match our brand and a the behaviors are not customizable.

It's dosable with something like the following:

input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

[patricklafrance]

Any thought on this @alexasselin008 ?

Indeed I believe this component should behave similiarly to a native date input. It's been an issue for a while.