Text field components do not trigger validation when changing validation constraints

[sissbruecker]

Description

Changing a validation constraint on any text field based component does not trigger validation on the server-side. That means that adding or removing constraints with an existing value has no effect on the validity of the component.

When changing a constraint on the server-side, the server-side validation should be run again, and the server-side validation state of the component should update. This seems to affect any text field based components (possibly all components featuring validation), and all constraints (min length, max length, pattern, ...). Note that for some constraints the web-component also does not update correctly (min length).

When solving this we also need to consider edge-cases, for example:

• we do not want to run validation if the user has not interacted with a field yet, otherwise setting a constraint would mark it as invalid immediatly even though the user did not have a chance to enter something
• how to handle programmatically set values and initial values

Live Demo (optional)

n/a

Minimal reproducible example

TextField textField = new TextField();

NativeButton setConstraint = new NativeButton(
  "Set min length constraint", 
  e -> textField.setMinLength(10)
);
NativeButton reportValidity = new NativeButton(
  "Report validity", 
  e -> System.out.println("Text field is valid: " + !textField.isInvalid())
);

add(textField, setConstraint, reportValidity);

Steps to reproduce

1. Run the example above
2. Enter abc
3. Click Report validity
4. Console logs Text field is valid: true
5. Click Set min length constraint
6. Click Report validity again
7. Console logs Text field is valid: true

Expected outcome

The component should report as invalid.

Actual outcome

The component still reports as valid.

Environment

• tested with v23, but this should affect all versions, as the logic was seemingly never implemented

Browsers Affected

Tested with:

• Chrome
• Firefox

[vursen]

DatePicker and TimePicker also have this issue.