[DateTimePicker] Binder does not receive partial values (containing only date or time)

simasch commented 1 year ago

Description

I use a DateTimePicker with a Binder.

Because the value of the DateTimePicker is not sent to the server as long as it's not valid, this causes unexpected behavior in combination with the binder.

The form is valid for the binder even if the value is not, and the entered value gets lost after saving.

This makes using a DateTimePicker with a Binder practically unusable.

Expected outcome

Binder should have validation error if the value in the DateTimePicker is not valid.

Minimal reproducible example

https://github.com/simasch/vaadin-picker

Steps to reproduce

Enter a date but no time in the DateTimePicker
Hit the save button

Result: The entered data in the DateTimePicker is lost

Environment

Vaadin version(s): 24.1.4

Browsers

Issue is not browser related

TatuLund commented 1 year ago

The problem is rooted to DateTimePicker having no default value for time.

There are bunch of tickets about that, e.g. https://github.com/vaadin/web-components/issues/668, where I give workaround

    dateTime.getElement().executeJs("this.__datePicker.addEventListener('change', function(){this.__timePicker.value='00:00';}.bind(this));");

You naturally can change the default from 00:00 to anything you like.

Furhermore as in Vaadin 24 there is now client side validation enforcing, your code exhibits another issue in Vaadin 24 context, which is that the DateTimePicker should catch that value is not valid in client side and Binder should be in sync with that. That is a bug.

TatuLund commented 1 year ago

Now the question is, will this be fixed by https://github.com/vaadin/web-components/pull/6238/files#diff-f4baf89fd06719c8fae9883b6b43b8dbd2e26daf73ddc6c9f492168b88e012c2

Cross check: https://github.com/vaadin/web-components/pull/6238

vursen commented 1 year ago

Now the question is, will this be fixed by https://github.com/vaadin/web-components/pull/6238/files#diff-f4baf89fd06719c8fae9883b6b43b8dbd2e26daf73ddc6c9f492168b88e012c2

The dirty flag doesn't address the reported issue (a lack of the default value).

Furhermore as in Vaadin 24 there is now client side validation enforcing, your code exhibits another issue in Vaadin 24 context, which is that the DateTimePicker should catch that value is not valid in client side and Binder should be in sync with that. That is a bug.

Could you please provide a more detailed scenario? I'm not sure I got the problem. DateTimePicker is invalid as long as any of its child pickers are invalid, including the bad input case.

simasch commented 1 year ago

@vursen The problem is that on the server side the binder is valid but on the client side it's not

vursen commented 1 year ago

The problem is that on the server side the binder is valid but on the client side it's not

Could you provide an example and steps to reproduce the validation inconsistency please?

simasch commented 1 year ago

Check out the provided https://github.com/simasch/vaadin-picker everything is described in the bug description

vursen commented 1 year ago

Confirmed that the field incorrectly invalidates when entering a date manually and blurring. Note, this doesn't happen if you press Enter before blur. This issue can be treated separately from Binder not receiving partial values, so I created a separate ticket: https://github.com/vaadin/flow-components/issues/5335

rolfsmeds commented 1 year ago

Let's try to figure out the correct behavior for DTP:

When the DTP is blurred with a date but no time, it's considered an invalid value, similarly to how a DatePicker with only a year filled in would be.
This state should make the field invalid
An appropriate error message should be shown (a general "Invalid value" would be better than nothing, but of course a more specific one like "Incomplete value" would be better)
What happens to an incomplete DTP value when the form is saved should be equivalent to what happens to an incomplete date value in the DatePicker (and of course ideally the application logic should probably prevent the form from being saved when there are invalid fields in it, which there should be in this case)
Let's tackle the enter/blur behavior dilemma in the other ticket

wtomee commented 7 months ago

The problem is rooted to DateTimePicker having no default value for time.

There are bunch of tickets about that, e.g. vaadin/web-components#668, where I give workaround
    dateTime.getElement().executeJs("this.__datePicker.addEventListener('change', function(){this.__timePicker.value='00:00';}.bind(this));");
You naturally can change the default from 00:00 to anything you like.

Furhermore as in Vaadin 24 there is now client side validation enforcing, your code exhibits another issue in Vaadin 24 context, which is that the DateTimePicker should catch that value is not valid in client side and Binder should be in sync with that. That is a bug.

This workaround is not working in Vaadin 24.3.7. Reading all the related issues I would like to kindly ask that: do you have any updates on it?

vaadin / flow-components