Stuck in invalid state after last validation constraint is removed while invalid

[Haprog]

Description

The validation considers required, pattern, maxlength and minlength. If any of those are set, then it sets invalid boolean based on the return value of checkValidity() on the native <input>. If none of those are set you can still manually set invalid to true or false based on your own logic and vaadin-text-field keeps the invalid state as it has been set.

Currently the problem seems to be that when you only have one of those validation constraints set (e.g. required) and the field has been validated and become invalid (e.g. by just focusing and blurring a field that was required), and then you remove the constraint, it doesn't run checkValidity() on the native input anymore and it keeps the invalid state (as if it had been added manually). Basically the text field never automatically removes invalid state when there are no active validation constraints.

This causes bad behaviour when e.g. required property has been bound to some value that updates based on other controls (e.g. a checkbox which toggles if some fields are required or not).

I think the proper logic here would be to observe when any of required, pattern, maxlength or minlength constraints is removed and invalid == true already, then set this.invalid = this.inputElement.checkValidity();

When the field is invalid and any validation constraint (required, pattern, maxlength, minlength) is removed, validation should be run again and invalid state updated accordingly (even if there are no more active validation constraints). If it was the last/only validation constraint (e.g. changing a required field to not required) invalid should basically be set to false so that it doesn't get stuck as invalid.

This was first reported at vaadin/vaadin-combo-box#830 and might affect also other components that internally use vaadin-text-field.

Steps to reproduce

Put this on a page:

<vaadin-text-field required="{{tfRequired}}"></vaadin-text-field><br>
<label>Required <input type="checkbox" checked="{{tfRequired::change}}"></label>

1. toggle checkbox on (makes text field required)
2. focus and unfocus the text field (makes it invalid since it's still empty)
3. toggle checkbox off (makes text field not required)
4. write something in the text field and unfocus it, notice that text field is still shown as invalid

Now the only way to make it valid again is to either manually set invalid = true or make it required again and then change the value to something other than empty.

[Haprog]

We should also check if our other components (which support validation) have the same issue. I can go though and check and report (or fix) them after fixing this.

[Haprog]

This fix has now been released in v2.3.9 and v2.4.10.