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