feat: integrate client-side validation into TextField

[vursen]

Description

• Implement HasClientValidation.
• Implement ClientValidationUtil.
• Implement ValidationStatusChangeEventListener.
• Add ITs ensuring the constraint validation is run on the validated event.
• Add ITs ensuring the binder validation is run on the validated event.
• Add ITs ensuring only the server can set TextField to valid.
• Add ITs for basic constraint validation.
• Add ITs for basic constraint validation when used through binders.

The integration tests are implemented as abstract classes so that they can be reused later for NumberField, PasswordField, and so on.

Depends on

• fix!: make setValue emulate real user input #3490
• fix: delegate sendKeys calls to the input element #3501
• feat: add abstract validation test classes #3629

Part of vaadin/platform#3066

Type of change

• Feature

Checklist

• I have read the contribution guide: https://vaadin.com/docs-beta/latest/guide/contributing/overview/
• 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.

[vursen]

Some ITs have failed which is apparently caused by the fact that we don't trigger the binder validation on the validated event.

Scenario:

1. The field doesn't pass the binder validation so it gets the invalid attribute.
2. The user triggers a blur event which leads to firing a validated event.
3. The field passes the constraint validation but the binder validation hasn't been run so the invalid attribute gets removed (INCORRECT).

[vursen]

I actually encountered a more heavy challenge which is that the validated event may happen during the web component's initialization which may result in an invalid reset.

Example:

textField = new TextField();
textField.setValue("Some not empty value");
textField.setInvalid(true);
add(textField)

What happens here is Polymer triggers value observers (because of the provided initial value) during the web component's initialization which subsequently triggers a validated event (because of this logic in the web component). As a result, Flow resets the invalid state since everything is valid in terms of the Flow validation (no constraints, no binder and etc).

I'm trying to fix that in the web components.

[DiegoCardoso]

There's still one missing piece, which is to fire the ValidationStatusChangeEvent when the client side validation changes. Testing how it works, it seems that once the event is dispatched, the binder will take the validation status sent on the event to set the component is valid/invalid. So, the getDefaultValidator() is not called.

The thing I am still thinking about is how the validate method comes into play here. It needs to be called so that the component being used without binder will get the invalid state correctly set. But when binder is being used, we would probably need to call getValidationSupport().isInvalid(getValue()) to get the validation result and send it to binder with the event.

[vursen]

Good point. My first impression of ValidationStatusChangeEventListener was that we will need to subscribe the binder to ClientValidatedEvent by adding ValidationStatusChangeEventListener for ClientValidatedEvent.

[vursen]

So, it seems that the way it should work is:

1. ValueChange triggers constraint validation and then binder validation (this is already done).
2. ClientValidated triggers constraint validation and then binder validation by invoking ValidationStatusChangeEventListener listeners.

[DiegoCardoso]

I actually had a wrong assumption here:

So, the getDefaultValidator() is not called.

My mistake was because I placed the breakpoint on the method body instead of the lambda's. What I can understand now is:

1. Client side validation fires validated event
2. Flow component listens the event and fires ValidationStatusChangeEventListener
3. Binder listens to this event and calls its validate() method
4. Eventually, validate() method will call the lambda created on getDefaultValidator().
5. Component's checkValidity() method is called.

[vursen]

The build succeeded. I think the only remaining thing now is to put changes behind a feature flag and choose between setInputValue vs setValue TB methods (#3484).

[vursen]

The purpose of the second parameter of ValidationStatusChangeEvent is not clear to me given that it is not used anywhere.

[sonarcloud]

SonarCloud Quality Gate failed.   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
36 Code Smells

No Coverage information
7.0% Duplication

[vaadin-bot]

This ticket/PR has been released with Vaadin 23.2.0.