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.

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

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

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

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

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

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.

vursen · 2025-04-30T13:11:23Z

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.

Yeah, there is a difference in component behavior: web components should validate on blur, whereas flow components should not.

Co-authored-by: Sergey Vinogradov <[email protected]>

ugur-vaadin · 2025-05-01T00:37:09Z

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

This was fixed and the tests for validating on blur were reverted.

vursen · 2025-05-01T07:03:04Z

This was fixed and the tests for validating on blur were reverted.

I guess this place needs to be fixed too, as otherwise required validation doesn't occur when the overlay is closed by clicking outside – a case that is also treated as blur in other components such as date-picker, even though focus is restored afterwards.

packages/date-time-picker/test/value-commit.test.js

ugur-vaadin · 2025-05-01T09:43:32Z

This was fixed and the tests for validating on blur were reverted.

I guess this place needs to be fixed too, as otherwise required validation doesn't occur when the overlay is closed by clicking outside – a case that is also treated as blur in other components such as date-picker, even though focus is restored afterwards.

Fixed and added tests.

packages/date-time-picker/test/value-commit.test.js

vursen · 2025-05-02T06:33:36Z

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

+      if (isOutsideClick) {
+        this.__outsideClickInProgress = true;
+
+        setTimeout(() => {


Could we use queueMicrotask here to limit more preciesely how long this flag stays true?

It seems that queueMicrotask does not provide enough of a duration for the flag to stay true.

Pressed the wrong button :)

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

Co-authored-by: Sergey Vinogradov <[email protected]>

This reverts commit 927bb35.

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

packages/date-time-picker/test/value-commit.test.js

vursen · 2025-05-05T17:20:46Z

packages/date-time-picker/test/value-commit.test.js

+      });
+
+      it('should commit as unparsable on Enter', async () => {
+        await enterParsableInput(picker);


Let's move this to beforeEach

Suggested change

await enterParsableInput(picker);

await enterParsableInput(picker);

vursen · 2025-05-05T17:20:56Z

packages/date-time-picker/test/value-commit.test.js

+      });
+
+      it('should commit as unparsable on Enter', async () => {
+        await enterUnparsableInput(picker);


Let's move this to beforeEach

sonarqubecloud · 2025-05-05T17:26:20Z

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

vaadin-bot · 2025-06-17T10:37:27Z

This ticket/PR has been released with Vaadin 24.8.0.rc2 and is also targeting the upcoming stable 24.8.0 version.

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

Merged

9 tasks

vursen reviewed Apr 25, 2025

View reviewed changes

packages/date-time-picker/test/individual-picker-update-helpers.js Outdated Show resolved Hide resolved

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

ugur-vaadin and others added 6 commits May 1, 2025 03:15

test: extract value commit tests into a separate file

c36988b

refactor: always validate on blur

985f33d

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

42ec046

Co-authored-by: Sergey Vinogradov <[email protected]>

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

026618c

Co-authored-by: Sergey Vinogradov <[email protected]>

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

7ebb2c7

Co-authored-by: Sergey Vinogradov <[email protected]>

chore: add incomplete cases to the change event list

2bbf067

vursen reviewed May 1, 2025

View reviewed changes

packages/date-time-picker/test/value-commit.test.js Outdated Show resolved Hide resolved

fix: always validate on overlay closed by outside click

ae94e88

refactor: debounce value commit and refactor all tests

a197ade

vursen previously approved these changes May 2, 2025

View reviewed changes

vursen reviewed May 2, 2025

View reviewed changes

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

69dd706

Co-authored-by: Sergey Vinogradov <[email protected]>

ugur-vaadin and others added 13 commits May 5, 2025 10:01

Update packages/date-time-picker/test/value-commit.test.js

ea6eb62

Co-authored-by: Sergey Vinogradov <[email protected]>

Update packages/date-time-picker/test/value-commit.test.js

dd4a9f0

Co-authored-by: Sergey Vinogradov <[email protected]>

Update packages/date-time-picker/test/value-commit.test.js

6edb89d

Co-authored-by: Sergey Vinogradov <[email protected]>

Update packages/date-time-picker/test/value-commit.test.js

b71babd

Co-authored-by: Sergey Vinogradov <[email protected]>

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

7339375

Co-authored-by: Sergey Vinogradov <[email protected]>

Update packages/date-time-picker/test/value-commit.test.js

3aa17d1

Co-authored-by: Sergey Vinogradov <[email protected]>

Update packages/date-time-picker/test/value-commit.test.js

43217e3

Co-authored-by: Sergey Vinogradov <[email protected]>

Update packages/date-time-picker/test/value-commit.test.js

4016de8

Co-authored-by: Sergey Vinogradov <[email protected]>

refactor: revert adding debouncer for value commit

ea77f80

refactor: use microtask in outside click flag

927bb35

test: add missing async

86f5688

Revert "refactor: use microtask in outside click flag"

66f0780

This reverts commit 927bb35.

test: update assertions

70f1907

vursen reviewed May 5, 2025

View reviewed changes

packages/date-time-picker/src/vaadin-date-time-picker-mixin.js Outdated Show resolved Hide resolved

ugur-vaadin added 3 commits May 5, 2025 16:34

test: fix tabbing related tests for firefox

52e99ec

test: use send mouse to element click in order to fix webkit tests

1de3640

refactor: call validation on commit value change

2c067b6

vursen reviewed May 5, 2025

View reviewed changes

packages/date-time-picker/test/value-commit.test.js Outdated Show resolved Hide resolved

packages/date-time-picker/test/value-commit.test.js Show resolved Hide resolved

test: add tests for required but initially empty pickers

4c554a5

vursen changed the title ~~feat: datetimepicker validation improvements~~ feat!: datetimepicker validation improvements May 5, 2025

vursen approved these changes May 5, 2025

View reviewed changes

test: move individual lines to beforeeach

f683564

ugur-vaadin removed request for web-padawan and yuriy-fix May 5, 2025 17:25

ugur-vaadin merged commit 0770cde into main May 5, 2025
9 checks passed

ugur-vaadin deleted the feat-datetimepicker-validation-improvements branch May 5, 2025 17:58

vaadin-bot added prerelease version for Vaadin 24.8.0 Released with Vaadin 24.8.0.rc2 labels Jun 17, 2025

	await enterParsableInput(picker);
	await enterParsableInput(picker);

feat!: datetimepicker validation improvements #8986

feat!: datetimepicker validation improvements #8986

Uh oh!

Conversation

ugur-vaadin commented Apr 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Type of change

Checklist

Uh oh!

Uh oh!

vursen commented Apr 29, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ugur-vaadin commented Apr 29, 2025

Uh oh!

vursen commented Apr 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ugur-vaadin commented May 1, 2025

Uh oh!

vursen commented May 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

ugur-vaadin commented May 1, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

vursen May 2, 2025

Choose a reason for hiding this comment

Uh oh!

ugur-vaadin May 5, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

vursen May 5, 2025

Choose a reason for hiding this comment

Uh oh!

ugur-vaadin May 5, 2025

Choose a reason for hiding this comment

Uh oh!

vursen May 5, 2025

Choose a reason for hiding this comment

Uh oh!

ugur-vaadin May 5, 2025

Choose a reason for hiding this comment

Uh oh!

sonarqubecloud bot commented May 5, 2025

Quality Gate passed

Uh oh!

Uh oh!

vaadin-bot commented Jun 17, 2025

Uh oh!

Uh oh!

ugur-vaadin commented Apr 19, 2025 •

edited

Loading

vursen commented Apr 30, 2025 •

edited

Loading

vursen commented May 1, 2025 •

edited

Loading