DatePicker remains invalid after clearing its value

[javier-godoy]

The following steps will cause a date picker to remain marked as invalid

1. Type "asdf" in date picker
2. Focus into text field (or just click outside the date picker field) (datepicker is now invalid)
3. Focus into date picker using the keyboard, not with the mouse, and delete the text, do not press enter.
4. Focus into text field (or just click outside the date picker field)

Expected outcome: Date picker should not be marked as invalid.

Actual outcome: Date picker remains marked as invalid, even though it no longer requires user action in order to "fix the value" (because empty is allowed).

Version: Vaadin 14.0.6

 	DatePicker datePicker = new DatePicker();
    	TextField textField = new TextField();
    	    	
    	add(datePicker);
    	add(textField);
    	Binder<Bean> binder = new Binder<>();
    	binder.forField(datePicker).bind(Bean::getDate, Bean::setDate);
    	binder.forField(textField).bind(Bean::getText, Bean::setText);   

[TatuLund]

This looks like regression. I could not replicate it with Vaadin 13, but it happens with Vaadin 14.

[jouni]

I’ll start by checking if this can be reproduced with the plain web component and whether https://github.com/vaadin/vaadin-text-field/pull/418/files fixes this issue as well.

Update: reproduces with the plain web component (master branch).

[jouni]

Verified that https://github.com/vaadin/vaadin-text-field/pull/418/files fixes the issue, at least for the plain web component.

Previous verification was inaccurate. It does not seem to be fixed after all. The crucial step in the bug is that you do not focus the invalid date picker with the mouse, but with the keyboard (Tab key). I updated the issue description.

I’ll try to verify it also together with latest Flow, though the assumption is that it is irrelevant for the bug/fix.

[jouni]

It seems the problem is simply that validation is only run when the overlay is closed, not for example when the field is blurred.

[jouni]

This looks like regression. I could not replicate it with Vaadin 13, but it happens with Vaadin 14.

I didn’t pinpoint the regression, but I checked with one very old project (Vaadin 10.0.2), and there the date picker always shows the overlay when you type in the input (even when clearing it), and the validation is triggered when the users closes the overlay.

[DennisBundszus]

Hello @jouni ,
I am the Vaadin-User who initially reported this DatePicker-behaviour to javier via the Vaadin-Support-Chat

Will your fix also work for the following situation?:

1. Someone writes letters to the DatePicker
2. Said person uses the clear-button on the DatePicker-Component and therefore clears the field without clicking into it. Does that also fire a blur-event and therefore the validation of the now empty DatePicker?

[jouni]

@DennisBundszus: thanks, I didn’t test that case yet. I’ll do that right away.

Update: pressing the clear button will focus the field. The invalid state is still visually shown and is cleared when the user blurs the field.

That’s a good catch, that the invalid state should also be removed immediately when the clear button is used.