Skip to content

feat: date time picker validation improvements #7346

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

ugur-vaadin
Copy link
Contributor

@ugur-vaadin ugur-vaadin commented Apr 24, 2025

Description

This PR implements DateTimePicker validation improvements for the Flow counterpart. The changes include:

  • Use the new unparsable-change event from the web component
  • Replace the validated event
  • Prevent multiple validations during a single round-trip
  • Improve validation consistency similar to the web component
  • Postpone validation during navigation between DP and TP unless we are certain the value will be invalid (unless it is invalid or out of the range set using mix/max)
  • Introduce a dedicated error message for incomplete values
  • Handle the input element value changes caused by programmatically setting values

Based on the prototype.

Depends on vaadin/web-components#8986.

Part of #6697

Type of change

  • Bugfix
  • Feature

Checklist

  • I have read the contribution guide: https://vaadin.com/docs/latest/contributing/overview
  • I have added a description following the guideline.
  • The issue is created in the corresponding repository and I have referenced it.
  • I have added tests to ensure my change is effective and works as intended.
  • New and existing tests are passing locally with my change.
  • I have performed self-review and corrected misspellings.
  • Enhancement / new feature was discussed in a corresponding GitHub issue and Acceptance Criteria were created.

@ugur-vaadin ugur-vaadin force-pushed the feat-datetimepicker-validation-improvements branch from 2a8f775 to 548332e Compare April 24, 2025 20:20
@ugur-vaadin ugur-vaadin marked this pull request as ready for review April 25, 2025 07:07
Copy link

@ugur-vaadin ugur-vaadin requested review from vursen and yuriy-fix April 25, 2025 07:14
// Notify the server in order to use the formatted values in validation
pendingInputElementValueSyncs++;
getElement().executeJs(
"this.dispatchEvent(new CustomEvent('value-programmatically-set'));");
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you please explain why this additional event is necessary? What scenario is it intended to cover?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This approach might not be correct since isInvalid() will still report true on the server side until the next round-trip occurs. I explored this a bit on my own and may have found a solution that avoids a round-trip: cbd6285. Please let me know if you see any issues with it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants