Binder ignores invalid value in DatePicker

[tepi]

• Description of the bug
  • DatePicker which is bound to a binder and has an invalid value entered by the user ends up with the binder status being valid.
• Minimal reproducible example

Binder<Beanie> binder = new Binder<>();
binder.forField(dp).withConverter(new LocalDateToDateConverter())
		.bind(Beanie::getDate, Beanie::setDate);
binder.setBean(new Beanie("Normal"));
binder.setValidationStatusHandler(e -> {
	System.err.println("Status: " + e.isOk());
	e.getFieldValidationErrors()
			.forEach(err -> System.err.println("Error: " + err.getMessage().orElse("n/a")));
	e.getBeanValidationErrors().forEach(err -> System.err.println("Error: " + err.getErrorMessage()));
});

• Expected behavior
  • When the user enters "foobar" into the DatePicker in the browser, the DatePicker is highlighted with red background which is expected. However when the binder's ValidationStatusHandler is triggered, the printouts in the code report that everything is ok and there are no errors.

• Actual behavior
  • Binder validation should not pass since there clearly is an invalid value in the DatePicker.
• Versions:
  • Vaadin / Flow version: 10.0.12
  • Java version: 1.8.0_121.jdk
  • OS version: macOS Sierra 10.12.6
  • Browser version: Version 73.0.3683.103 (Official Build) (64-bit)

[Legioth]

I'm not sure what we can do about this, since technically, the value of that date field is null or whatever value it previously had. Binder doesn't know anything about the currently invalid value that is internal to the date field.

[tepi]

The component API does have a property named "invalid" that could be used. Or is there something preventing sending this property to the server?

At least it can't be left as it currently is. It's very confusing for the user and it also breaks forms where the save button is enabled based on validity.

[denis-anisimov]

As I understand the server side never knows about foobar value on the client side since it's never sent to the server side.
So from the server side there is nothing to validate.
Some validation happens on the clients side and it always clashes with the server side validation.
Something should be done either in the client side component or in the server side integration (but anyway this is specific for date picker).

[fabst2w]

@Legioth: It could be a solution to enforce a regular expression at client side.

com.vaadin.flow.component.textfield.TextField offers a method setPattern and with a pattern set the client side avoids typing in invalid characters. That works fine.

Couldn't you set a pattern like "\d{1,2}.\d{1,2}.\d{2,4}" at the DatePicker? Ideally (and in my case a must-have) depending on the locale.

[Legioth]

Now when I come to think of it, this is already fixed in Vaadin 8 with the "default validator" concept which allows the field component to provide its own custom validator logic that is automatically used by Binder.

[guttormvik]

For reference: We have the same issue with ComboBox: Write an incorrect value and tab out, and the value is reset. https://github.com/vaadin/vaadin-combo-box/issues/864

For ComboBox there is special support for allowing invalid values, which can be used as a workaround, but maybe ComboBox, DatePicker and other fields should have a unified approach to invalid values? From my point of view I want all state to be available on the server-side, so I wouldn't mind all textfield components also having access to the textfield value. Valid or not.

[mvysny]

Miki is fixing a similar issue in his SuperFields add-on, here: vaadin-miki/super-fields#241 . Even though the issue relates to BigDecimalField, the fix should also affect DatePicker. After the fix is released, please try using the SuperDatePicker.

[ssmith-agristats]

Would appreciate a fix for this issue. Thanks.

[nittka]

see also #1158 and #1778

[vursen]

FYI: We have just introduced new validation behavior that is supposed to solve many different validation issues that people were complaining about, including this one. The new behavior is available under the feature flag in v23.2 for several components including DatePicker.

To enable the feature flag in your application, add the following to vaadin-featureflags.properties:

com.vaadin.experimental.enforceFieldValidation=true

Any feedback would be highly appreciated. For more details, please refer to vaadin/platform#3066.

[vursen]

The issue has been resolved by the new validation mechanism which is enabled by default in Vaadin 24. For any further bugs, please create separate issues.