search

duetds / date-picker

Duet Date Picker is an open source version of Duet Design System’s accessible date picker. Try live example at https://duetds.github.io/date-picker/
https://www.duetds.com
MIT License
1.73k stars 68 forks source link

input control's value never gets updated unless 10 or 0 characters long #57

Open johnantoni opened 3 years ago

johnantoni commented 3 years ago

Describe the bug Hi, I'm noticing that the input control never registers the value has been changed unless the input value is 0 or 10 characters (e.g. a date 2002-02-02) in length.

If it's 2002-02-0 it will not update the value.

But if you change 2002-02-0 to 2002-02-02 it will update the value, or if you change "2" to "".

To Reproduce Steps to reproduce the behavior:

  1. Go to date control

  2. input 2002-02-02

  3. change it to 2002-02-0

  4. look for the form value to change, doesn't change

  5. Go to date control

  6. input 2002-00

  7. change it to 2002-02-02

  8. look for the form value to change, it will only change when you enter 2002-02-02

Expected behavior Every time you change the value the input control's value should change.

Screenshots

Screen Shot 2020-12-03 at 3 07 04 PM Screen Shot 2020-12-03 at 3 14 13 PM
WickyNilliams commented 3 years ago

This was an intentional decision to ensure that the value is always a valid date (or empty string when input is cleared).

Perhaps we can be a bit more aggressive in setting to empty value - any invalid date should clear the value?

WickyNilliams commented 3 years ago

Possible duplicate of https://github.com/duetds/date-picker/issues/47?

johnantoni commented 3 years ago

Ok, thanks @WickyNilliams. It just seems strange that if you're editing the value via keyboard then the value you have on-screen is different from the one in the store until the value is a valid date or blank

WickyNilliams commented 3 years ago

I have just checked the behaviour of the native <input type="date">...

On invalid date, its value property is set to an empty string (in chrome and FF). So that happily aligns with my proposal above. So I will go with that.

WickyNilliams commented 3 years ago

If you want values as they are typed you could listen to an "input" event. But be aware you need a condition in your listener to filter out events from the year/month dropdowns. I may add a custom event for this purpose in future.

Edit: i just tested further and native date input does not raise input events for invalid dates. So you have no access to values as they are typed, unless you listen for keydown. I will endeavour to match native behaviour as much as possible.

Wahaj10 commented 3 years ago

what if we format the dates manually if the user forgets to add preceding 0s. ie. use duetBlur to change 2020-1-1 to 2020-01-01 in the input. How can we update the date-picker in that scenario?

Wahaj10 commented 3 years ago

Looks like I found a way, I can manually set the value of the date-picker as well 👍