feat: datetimepicker validation improvements #8986

ugur-vaadin · 2025-04-19T19:25:54Z

Description

Adds unparsable-change event for the web component.
Handles the case where one of the fields is still empty. Validates if
- the new value in the edited field is unparsable
- the edited field is date picker and the date is out of range set using min and/or max
improves validation consistency. Except for cases where the the edited field is valid after the edit and the DateTimePicker is still being edited, the validation behaves the same for Enter, outside click, and blur.
Adds tests that verify the validation logic and change events using combinations of initial states and field updates.

Based on the prototype implementation.

Part of #6697.

Type of change

Bugfix
Feature

Checklist

I have read the contribution guide: https://vaadin.com/docs/latest/contributing/pr
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.

vursen · 2025-04-25T06:46:42Z

packages/date-time-picker/test/individual-picker-update-helpers.js

+};
+
+export const individualPickerUpdateTestSetup = (individualPickerTest) => {
+  ['date-picker', 'time-picker'].forEach((pickerType) => {


Would it be possible to simplify or restructure these tests somehow to improve readability? The deep nesting is making it tricky to understand the test cases. Maybe it would be easier to follow if the tests were more explicit, even if it would lead to some duplication.

I started with that approach, but it seemed to bloat the tests by quite a lot. But I don't have a strong opinion, and if you think it is hard to read I can change it. Maybe we can keep ['date-picker', 'time-picker'].forEach(...) and explicitly add tests for different states&updates. What do you think?

Maybe we can keep ['date-picker', 'time-picker'].forEach(...) and explicitly add tests for different states&updates

This might help! Let's give it a try. While this would increase bloat, it should simplify debugging in the future.

Separated the tests.

sonarqubecloud · 2025-04-25T13:37:54Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

vursen · 2025-04-29T10:40:29Z

Looks like this change and this change together break required validation on blur, which works in other components:

Screen.Recording.2025-04-29.at.14.36.43.mov

vursen · 2025-04-29T10:25:23Z

packages/date-time-picker/src/vaadin-date-time-picker.d.ts

+ * empty => parsable        | change
+ * empty => unparsable      | unparsable-change
+ * parsable => empty        | change
+ * parsable => parsable     | change
+ * parsable => unparsable   | change
+ * unparsable => empty      | unparsable-change
+ * unparsable => parsable   | change
+ * unparsable => unparsable | unparsable-change


I'd suggest including the incomplete scenario in this list separately.

vursen · 2025-04-29T10:25:45Z

packages/date-time-picker/src/vaadin-date-time-picker.d.ts

 * @fires {Event} change - Fired when the user commits a value change.
+ * @fires {Event} unparsable-change - Fired when the user commits an unparsable value change and there is no change event.


Suggested change

* @fires {Event} unparsable-change - Fired when the user commits an unparsable value change and there is no change event.

* @fires {Event} unparsable-change - Fired when the user commits an unparsable or incomplete value change and there is no change event.

vursen · 2025-04-29T10:27:34Z

packages/date-time-picker/test/validation.test.js

@@ -60,16 +60,395 @@ const fixtures = {
      expect(dateTimePicker.invalid).to.equal(false);
    });

-    it('should validate on date-picker blur', () => {
+    ['date-picker', 'time-picker'].forEach((pickerType) => {


Let's create a value-commit.test.js file and move all new tests there. Validation and change events are both part of the value commit flow, so testing them together in one place would make sense. Example:

web-components/packages/date-picker/test/value-commit.test.js

Lines 12 to 43 in 7c2b6e5

function expectNoValueCommit() {

expect(valueChangedSpy).to.be.not.called;

expect(validateSpy).to.be.not.called;

expect(changeSpy).to.be.not.called;

}

function expectValueCommit(value) {

expect(valueChangedSpy).to.be.calledOnce;

// TODO: Optimize the number of validation runs.

expect(validateSpy).to.be.called;

expect(validateSpy.firstCall).to.be.calledAfter(valueChangedSpy.firstCall);

expect(unparsableChangeSpy).to.be.not.called;

expect(changeSpy).to.be.calledOnce;

expect(changeSpy.firstCall).to.be.calledAfter(validateSpy.firstCall);

expect(datePicker.value).to.equal(value);

}

function expectUnparsableValueCommit() {

expect(valueChangedSpy).to.be.not.called;

// TODO: Optimize the number of validation runs.

expect(validateSpy).to.be.called;

expect(changeSpy).to.be.not.called;

expect(unparsableChangeSpy).to.be.calledOnce;

expect(unparsableChangeSpy).to.be.calledAfter(validateSpy);

}

function expectValidationOnly() {

expect(valueChangedSpy).to.be.not.called;

// TODO: Optimize the number of validation runs.

expect(validateSpy).to.be.called;

expect(changeSpy).to.be.not.called;

}

vursen · 2025-04-29T10:32:46Z

packages/date-time-picker/src/vaadin-date-time-picker-mixin.js

+      this.__committedUnparsableValue = this.__unparsableValue;
+    }
+
+    get __hasPendingValueChange() {


Suggested change

get __hasPendingValueChange() {

/** @private */

get __hasPendingValueChange() {

vursen · 2025-04-29T10:33:04Z

packages/date-time-picker/src/vaadin-date-time-picker-mixin.js

@@ -315,12 +316,37 @@ export const DateTimePickerMixin = (superClass) =>
      return [this.__datePicker, this.__timePicker];
    }

+    get __filledPickers() {


Suggested change

get __filledPickers() {

/** @private */

get __filledPickers() {

ugur-vaadin · 2025-04-29T12:32:18Z

Looks like this change and this change together break required validation on blur, which works in other components:

Screen.Recording.2025-04-29.at.14.36.43.mov

I think that is my misunderstanding rather than an implementation error. My understanding was that the validation should not run when the component is blurred with no change to the input even if it is required.

ugur-vaadin added 2 commits April 19, 2025 22:22

feat: datetimepicker validation improvements

e7e96c1

test: simplify tests and reduce the number

2cbc6b8

ugur-vaadin requested review from vursen and web-padawan April 22, 2025 05:29

ugur-vaadin marked this pull request as ready for review April 22, 2025 05:29

ugur-vaadin mentioned this pull request Apr 24, 2025

feat: date time picker validation improvements vaadin/flow-components#7346

Open

9 tasks

vursen reviewed Apr 25, 2025

View reviewed changes

ugur-vaadin requested a review from yuriy-fix April 25, 2025 07:15

test: separate parametric tests

7c2b6e5

vursen reviewed Apr 29, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: datetimepicker validation improvements #8986

feat: datetimepicker validation improvements #8986

ugur-vaadin commented Apr 19, 2025 •

edited

Loading

vursen Apr 25, 2025 •

edited

Loading

ugur-vaadin Apr 25, 2025

vursen Apr 25, 2025 •

edited

Loading

ugur-vaadin Apr 25, 2025

sonarqubecloud bot commented Apr 25, 2025

vursen commented Apr 29, 2025

vursen Apr 29, 2025

vursen Apr 29, 2025

vursen Apr 29, 2025

vursen Apr 29, 2025

vursen Apr 29, 2025

ugur-vaadin commented Apr 29, 2025

		* @fires {Event} change - Fired when the user commits a value change.
		* @fires {Event} unparsable-change - Fired when the user commits an unparsable value change and there is no change event.

	function expectNoValueCommit() {
	expect(valueChangedSpy).to.be.not.called;
	expect(validateSpy).to.be.not.called;
	expect(changeSpy).to.be.not.called;
	}

	function expectValueCommit(value) {
	expect(valueChangedSpy).to.be.calledOnce;
	// TODO: Optimize the number of validation runs.
	expect(validateSpy).to.be.called;
	expect(validateSpy.firstCall).to.be.calledAfter(valueChangedSpy.firstCall);
	expect(unparsableChangeSpy).to.be.not.called;
	expect(changeSpy).to.be.calledOnce;
	expect(changeSpy.firstCall).to.be.calledAfter(validateSpy.firstCall);
	expect(datePicker.value).to.equal(value);
	}

	function expectUnparsableValueCommit() {
	expect(valueChangedSpy).to.be.not.called;
	// TODO: Optimize the number of validation runs.
	expect(validateSpy).to.be.called;
	expect(changeSpy).to.be.not.called;
	expect(unparsableChangeSpy).to.be.calledOnce;
	expect(unparsableChangeSpy).to.be.calledAfter(validateSpy);
	}

	function expectValidationOnly() {
	expect(valueChangedSpy).to.be.not.called;
	// TODO: Optimize the number of validation runs.
	expect(validateSpy).to.be.called;
	expect(changeSpy).to.be.not.called;
	}

	get __hasPendingValueChange() {
	/** @private */
	get __hasPendingValueChange() {

	get __filledPickers() {
	/** @private */
	get __filledPickers() {

feat: datetimepicker validation improvements #8986

Are you sure you want to change the base?

feat: datetimepicker validation improvements #8986

Conversation

ugur-vaadin commented Apr 19, 2025 • edited Loading

Description

Type of change

Checklist

vursen Apr 25, 2025 • edited Loading

Choose a reason for hiding this comment

ugur-vaadin Apr 25, 2025

Choose a reason for hiding this comment

vursen Apr 25, 2025 • edited Loading

Choose a reason for hiding this comment

ugur-vaadin Apr 25, 2025

Choose a reason for hiding this comment

sonarqubecloud bot commented Apr 25, 2025

Quality Gate passed

vursen commented Apr 29, 2025

vursen Apr 29, 2025

Choose a reason for hiding this comment

vursen Apr 29, 2025

Choose a reason for hiding this comment

vursen Apr 29, 2025

Choose a reason for hiding this comment

vursen Apr 29, 2025

Choose a reason for hiding this comment

vursen Apr 29, 2025

Choose a reason for hiding this comment

ugur-vaadin commented Apr 29, 2025

ugur-vaadin commented Apr 19, 2025 •

edited

Loading

vursen Apr 25, 2025 •

edited

Loading

vursen Apr 25, 2025 •

edited

Loading