Delegating invalid attribute to child components do not always work.

[TatuLund]

Description

CustomField is agnostic to its content in "invalid" state. It is developers responsibility to design the custom field visuals when the state is "invalid". The most common approach would be set the invalid attribute of the child components used. However, this is not sometimes working due timing issues. Hence as a workaround the update of the attribute needs to done after client roundtrip.

Expected outcome

I would assume this to work:

        @Override
        public void setInvalid(boolean invalid) {
            super.setInvalid(invalid);
            field.setInvalid(invalid)
        }

But instead I need to do

         @Override
        public void setInvalid(boolean invalid) {
            super.setInvalid(invalid);
            // There is a timing bug, workaround
            field.getElement().executeJs("return 0")
                    .then(res -> field.setInvalid(invalid));
        }

Minimal reproducible example

For complete implementation of Custom DecimalField see gist https://gist.github.com/TatuLund/293ad2cc3a2d10448cbd1630b7464ebf

Replace workaround https://gist.github.com/TatuLund/293ad2cc3a2d10448cbd1630b7464ebf#file-numberview-java-L150

With field.setInvalid(invalid)

Steps to reproduce

See above instructions on code

Type in number bigger than 10000.0 in the field.

Environment

Vaadin version(s): Vaadin 23 and 24

Browsers

No response

[sissbruecker]

Most field components include their own validation logic and as such control the invalid state themselves. If you don't want that then you can use field.setManualValidation(true) which will stop the field from running its own validation and leave control of the invalid state to the application.

Apart from that I could not reproduce the issue with the provided example (I did remove the workaround), the invalid state seems to update always. Still, it looks like not enabling manual validation is the root cause here.

[TatuLund]

@sissbruecker , thanks for the response. I can now see why it behaves like that. I think this detail should be covered in CustomField documentation in some way, as for a new user the behavior can be a surprise.

[sissbruecker]

We've updated the custom field Flow example in the docs to demonstrate how to propagate the invalid state to child components using manual validation mode. I've also created some tickets to document manual validation mode in general, and to potentially have a solution for propagating the invalid state with the web component as well. Closing this as resolved.