Vaadin 24 flow web components input validation behaviour change onblur

Question

The behaviour of how input elements in a form triggers validation changed between Vaadin 23 and 24. By validation I mean either the chain of a form, a bean with Bean Validation API annotations and a connecting BeanValidationBinder or some constraints for the input field.

In V24 a blur event instantly triggers a validation, before it only validated initially upon a changed value.

Examples using BeanValidationBinder in ValidationView forms:

• V24: https://github.com/tengcomplex/vaadin24-binder-validation-demo
• V23 behaves like 14, checked locally.
• V14: https://github.com/tengcomplex/vaadin14-binder-validation-demo

In the live demo examples of field contraints in the Vaadin documentation this is also reproducible:

• V24: https://vaadin.com/docs/latest/components/text-field/#constraints
• V23: https://vaadin.com/docs/v23/components/text-field/#pattern
• V14: https://vaadin.com/docs/v14/ds/components/text-field/#pattern

In this demos there is no BeanValidationBinder involved but the principle should be the same.

• Click into the "Phone number" text field.
• Enter no input.
• Leave the text field by tab or mouse.

See how the text field becomes red in V24 without any input. In previous version it only gets red if you input something wrong before leaving.

Issue https://github.com/vaadin/platform/issues/3066 seems to be the relevant place of this change.

I can't find any mentions of this in various places of changes on V24.

• https://vaadin.com/docs/latest/upgrading
• Github vaadin/platform/releases

Whether this new behaviour is better from a UX perspective might be debatable. It can however break existing applications with complex forms.

Consider a form with N inputs, a bean with string fields and @NotEmpty annotations and a BeanValidationBinder initialized with bindInstanceFields() method. On load the first input has the focus. As long as things are entered in order everything is fine. But if a user directly clicks the third input in the form, an error message of the first input is shown which might look unintuitive.

Or if you are using custom inputs, for example an input with search button where a click on the button pulls the focus from the input and triggers validation with an "empty value" error before the user even has the chance to pick something. Another scenario, dependencies in forms where a button further down the tab-order should trigger validation of some previous inputs. Depending where the focus sits when clicking the button this might trigger unexpected errors.

Looking mainly on com.vaadin.flow.component.textfield.TextField I don't see any general way of avoiding the validation upon on-blur. Overwriting all necessary web components or providing a custom BeanValidationBinder might be possible but feels just wrong.

There seems to be demand for deactivation of on-blur validation in https://github.com/vaadin/web-components/issues/354 from a non flow usage perspective which might be useful if it's ever gets picked up and implemented.

Questions, can the "old" validation behaviour be achieved somehow in a V24 application? Are there plans to implement some kind of backward compatibility for this? Could it be considered as a bug and an issue would be appropriate?

Answer 1

This is a known issue that arose after aligning the server-side validation timing with the web component, where eager validation on blur has been considered the expected behavior as of today.

We are currently considering a proposal to change the default behavior so that the field will only validate on blur after the user has actually interacted with it, for example, by typing something. For further updates, please follow https://github.com/vaadin/web-components/issues/6146.

Answer 2

You are not comparing the same thing: The demo you are referencing in V24 also has the field configured to be "required" (note the small blue dot after the label). Tabbing out of a required field notifies the user, that the input is missing. This behaviour is the same in V23 (and very likely in V14).

Answer 3

Summary of potential workarounds

Since it is confirmed that this issue is known and that Vaadin is going to implement validation only on "dirty" fields in #6146 it just might be necessary to have a temporary workaround for current V24 releases. During evaluation I came across various approaches.

• Implement your own Binder. Seems a) difficult and b) not even possible. AFAICT you only receive DomEvents that tell the Binder to validate. At a quick glance I was unable to work out a way to receive the type of event and if a value might have been changed.
• Implement your own WebComponents without throwing onblur validation events. Seems a lot of work and very inconvenient for future updates etc.
• Don't touch validation logic, handle your desired look by CSS only. Set up a CSS class e.g. "noerror", adding it for necessary components. Make it so that even if there is an error, just don't show it. Upon the first ValueChangeListener event remove that class, let component behave like default. Is a little tedious to fiddle with CSS attributes, could need adjustments on future changes. Seems however to be the least painful approach.