Validate on blur only after the user has typed something or triggered change event

[vursen]

Describe your motivation

One of the actions that currently trigger field component validation is blur (when the component loses focus).

This behavior has been repeatedly pointed out as undesired in the case of the initial interaction, when the user leaves the field without entering anything:

• Provide API to opt-out of on-blur validation for input elements web-components#354
• docs: cover validation changes in upgrading guide docs#2544 (comment)
• https://stackoverflow.com/questions/76636064/vaadin-24-flow-web-components-input-validation-behaviour-change-onblur

Describe the solution you'd like

Change the default behavior to avoid validating on blur until the user has typed anything. Additionally, provide an option to revert the old behavior.

One way to implement that is to introduce a flag that would indicate whether the field is dirty. The field is considered dirty as soon as the user starts entering anything into it. This flag can be then used in blur handlers to determine whether the validation has to be run. Setting the flag initially to true would enforce the old behavior.

Note, for components like date-picker and similar, the flag may need to be updated on some other actions as well.

[vursen]

The proposal has been slightly clarified after an internal discussion. We've reached a consensus that the component should be marked as dirty in either of the following situations:

1. the user has typed something (to ensure that entering bad input will enable validation on blur).
2. the user has triggered a change event (to ensure that, for example, selecting a date in a DatePicker's dropdown will also enable validation on blur).

Note, for components that don't have an input element – such as CheckboxGroup, Select, etc – the change event will be the only trigger to make the component dirty. This implies that, for such components, the required validation will only occur when changing the value from non-empty to empty. For RadioGroup, it means that the required validation will never be triggered anymore (as radio buttons cannot be unchecked), unless the component is initially set as dirty.

[tengcomplex]

AFAICT, nice work of @vursen so far.

I wrote a related SO question. It seems however there are not many complaints about this validation behaviour, which suprises me a little bit.

Is there any estimation when the described solution might be available in a build?

[vursen]

Hello, @tengcomplex!

The work on the solution proposed in this ticket has been paused because, after conducting further research, we've found a potentially better approach that would also help resolve several other validation issues. It's currently in the Github discussion stage: https://github.com/orgs/vaadin/discussions/4434. Your feedback would be greatly appreciated.

[vursen]

After more consideration, we've decided to treat "validation on blur" as a bug in Flow components caused by the new validation mechanism. Therefore, it will be only removed from the Flow components. The web components will continue to validate on blur as before. Follow #5537 for more details.

[yuriy-fix]

Closing this as resolved for flow components as a part of #5537. Fix should be available in 24.3.0-beta1.
DateTimePicker behaviour will be tackled separately.