asRequired method with Binder does not work properly with the tab button

[shadikhani]

When I use the code below and I use the tab button only to tab between components, the asRequired method in binding does not work properly.

Person person = new Person();
Binder<Person> binder = new Binder<>();
binder.setBean(person);
TextField textField = new TextField("Name");
binder.forField(textField)
        .asRequired("Please enter your name")
        .bind(Person::getName,
                Person::setName);

First Demo:

Second Demo:

In the FirstDemo.gif when you click on the name field and enter a data and you delete it and you use your tab to go to another component the requirement is not checked.

In the secondDemo.gif when you click on the name field and enter some data and use your mouse to click somewhere out of that text-field area and then select the data and delete it the requirement validation will work.

[Legioth]

My guess is that this is related to the logic that avoids eagerly showing validation errors for untouched fields. This logic is in place to avoid situations where a newly opened (empty) form form would look scary by being full of validation error indicators.

Most likely, the server-side validation logic doesn't get out of this mode for the field until a value has been submitted to the server, which might not happen if you type something in there and remove it again before tabbing out. From the server's point of view, this is the same situation as if you'd just tab through the fields without making any changes to them.

[shadikhani]

When I use this line of code it works properly:
textField.addBlurListener(event -> binder.validate());

[pekam]

The basic difference between the web component and Flow is that the web component runs validation on blur event and Binder does it on ValueChangeEvent.

This causes differences in the behavior depending on the ValueChangeMode. With the default mode, ValueChangeEvent is not fired at all in the described case, since the value hasn't changed, so validation is not triggered. When using ValueChangeMode.EAGER, Binder runs validation on every keypress which is also different from the web component.

[Legioth]

Yeah, that validates my hypothesis. The question is still whether it's desirable from a UX perspective that an initially empty field would show up as invalid after you've tabbed through it but not made any changes (or made changes that have been reverted "immediately").

[pekam]

The question is still whether it's desirable from a UX perspective that an initially empty field would show up as invalid after you've tabbed through it but not made any changes (or made changes that have been reverted "immediately").

This is how our web components work, and I'd assume the UX has been designed thoroughly during their implementation.

[jouni]

Yes, tabbing through a field has been considered “enough” to trigger the validation.

[vursen]

The issue has been resolved by the new validation mechanism which is enabled by default in Vaadin 24. For any further bugs, please create new issues.