search

vaadin / flow-components

Java counterpart of Vaadin Web Components
100 stars 66 forks source link

Improve DateTimePicker's validation for better user experience #6697

Open vursen opened 2 weeks ago

vursen commented 2 weeks ago

Description

DateTimePicker has a number of validation issues and inconsistencies that negatively impact user experience:

  1. Blur triggers the required error when leaving the field without changes (related to the validated event)
  2. Validation can be triggered more than once in a round-trip (related to the validated event)
  3. Entering unparsable input in the DP or TP and pressing Enter or navigating to the other picker doesn't trigger the bad input error, although it's already known the value will be invalid
  4. Outside click that closes the DP or TP overlay doesn't trigger the bad input error as well, creating the impression of validity. The error appears only on the second click that corresponds to blur.
  5. Selecting a date in the DP beyond min/max doesn't trigger the min/max error, although it's already known the value will be invalid
  6. Removing part of a valid complete value and then navigating to the other picker results in the immediate required error, although the user is still interacting with the field
  7. Leaving the field with an incomplete value (containing only a date or time) doesn't invalidate the field unless it's required
  8. Lack of a dedicated i18n error message for incomplete values

These issues are partly related to the validated event, which DateTimePicker still uses for triggering validation, unlike other components that have been refactored to use the unparsable-change event.

Related

vursen commented 2 weeks ago

After these issues are resolved, the JavaDoc of the DateTimePicker class can be updated to include a section about validation.

vursen commented 2 weeks ago

Here is a prototype that aims to address all these issues simultaneously:

A brief overview: