Vuepic / vue3-date-time-picker

Datepicker component for Vue 3
https://vue3datepicker.com
MIT License
158 stars 13 forks source link

Invalid date shows in input after being discarded #117

Closed weskubo-cgi closed 2 years ago

weskubo-cgi commented 2 years ago

Describe the bug When entering an invalid date using textInput enabled, the model is not updated with a new Date object but the invalid text still shows onscreen until the text gets focus again. This behaviour is confusing for users as they will think their valid date was accepted. The screen should be updated to show the previous model value when the text value is rejected.

To Reproduce Steps to reproduce the behavior:

Scenario 1 - Start with null date

  1. Create a Datepicker with format="yyyyMMdd" and textInput enabled
  2. Default the date model to empty
  3. Enter 20229999
  4. Click outside the input text
  5. Input text shows 2022999
  6. Click inside the input text
  7. Input text is empty

Scenario 1 - Start with valid date

  1. Create a Datepicker with format="yyyyMMdd" and textInput enabled
  2. Default the date model to 20220101
  3. Enter 20229999
  4. Click outside the input text
  5. Input text shows 2022999
  6. Click inside the input text
  7. Input text is 20220101

Expected behavior Since the DatePicker does not accept the invalid value and retains the previous model value, the underlying value should be shown to the user when the input text looses focus, not when it subsequently receives focus.

Screenshots If applicable, add screenshots to help explain your problem.

Version Tested on 2.5.0 (version in use) and 2.7.0 (codesandbox)