search

vaadin / flow

Vaadin Flow is a Java framework binding Vaadin web components to Java. This is part of Vaadin 10+.
Apache License 2.0
600 stars 165 forks source link

Polymer template properties are null when the component is included in a Java file with @Id #12456

Open damtonix opened 2 years ago

damtonix commented 2 years ago

Describe the bug

If you use the polymer template and write a custom component, that has one or more properties, and you use this component in a view, which is also a polymer template and defines the properties of the component, everything is fine. But if you then want to include the component in the Java file of the view with @Id you'll have a problem. Now the properties will always be null.

Expected-behavior

There should be no difference in the property handling when the component is only used in the polymer template and when the component is used in the Java code too with @Id.

Reproduction

Example Project: https://github.com/damtonix/vaadin-bug-example

How to reproduce:

If you navigate to /bug you will see that all works fine (bug-view.js). The button should be red because of a property called "propy" of the bug-component component in the view. But if you want to use the component in the Java code and change the lines in BugView.java from: //@Id //private BugComponent bugComponent; to: @Id private BugComponent bugComponent;

the button on the BugView won't be red anymore. This is because the property then will be null.

The interessting thing is that the _equals function in the Javascript code from the bug-component gets called twice. Once with the right value of the attribute (in this case "red") and a second time with the wrong value: null.

System Info

Windows 10 Pro 21H1, Vaadin 14.7.2, Edge 94.0.992.38 (64-Bit)

vaadin-bot commented 2 years ago

Thanks for using Vaadin Platform, we appreciate your help and are going to take care of this as soon as possible.

caalador commented 2 years ago

In this instance there is the issue that you have the TemplateModel with the property propy which will override and clear the client template value.

As a workaround if you do not need anything specific from the PolymerTemplate component the BugComponent can be used as just a Component or you can in the BugView constructor just set the propy property as 

    public BugView() {
        bugComponent.getElement().setProperty("propy", "red");
    }

As this happens also when not having the BugComponent.Model template with the propy property would make it seem that something is overriding the binding attribute.