Binder-bound checkboxes getting reset

[martinisraelsen]

I have a number of forms using polymer templates and on all the forms, the checkboxes are getting reset when the form is displayed. Using a ValueChangeListener, I found that the checkbox is being set twice. The first time it is being set when I call readBean or setBean (correct). But it's being set a second time (reset) after the attach event. The fromClient flag is true when it's being reset, suggesting it comes from the client.

To better trace through the issue, I created a simple form with a checkbox, a text field and two buttons. When loaded within my app, the checkbox is being reset even though it shouldn't be. However, if I outcomment the second button in the java code, the check box is not reset and shows as checked when the forms open.

At one point in time, I was able to get it to work by shorting the package name. But it was inconsistent.

Other bound components seems to be working just fine. It's only the checkboxes that aren't. The behaviour has been consistent through the last couple of betas and all RCs including RC5.

The behavior can be observed in a vanilla bakery-app, by adding the attached files under ../ui/views/development/. Note - use the same path/package location. When I initially tried with the files located higher in the hierarchy, the issue didn't occur or didn't occur consistently.

checkboxes.zip

[denis-anisimov]

It looks like this is known issue with the client-side property which sets its default value from the client side if the server side is not set.
But the server side property should be set in this case which is weird.
Anyway the server side value should override the client side.

[martinisraelsen]

Any thoughts on work around for this? I tried a few things include doing a delayed load of the bean, but not of the work arounds worked.

[denis-anisimov]

I'm pretty sure that this bug has no relation to Binder.
Binder is only server side functionality which uses component API to set properties.
As a result the same behavior may be achieved via calling component API directly.

What's important in this description is: the Checkbox is bound via @Id.
This is the only important piece of the code.
Without mapping Checkbox via @Id everything works fine (with or without Binder).

You asked about workaround: the workaround is avoid using @Id.
Add slot into your template. Add Checkbox instance create via Java code explicitly to your component and bind it.
Everything works fine in this way.

So the problem is @Id as always in such situations.
As I said I'm pretty sure the binder has no any relation to the cause if the issue.
Most likely the checkbox will be reset if it's set to true once it's attached.

I recall similar issue even without @Id caused by the fact that some components updates several properties at the same time. It happens on the client side. This situation causes wrong events handling and we have a workaround for that in the client engine.
I believe this workaround doesn't work with components mapped via @Id . There are too many things which don't work for @Id and we have too much code which specifically handles @Id components on the client side.

[denis-anisimov]

That will be a lot of fun to debug this issue........

So here is the short localized version of this bug.

• Java code is:

@Route("injected-checkbox")
@Tag("inject-checkbox")
@HtmlImport("frontend://inject-checkbox.html")
public class InjectedCheckboxPage extends PolymerTemplate<TemplateModel> {

    @Id("accept")
    private Checkbox checkbox;

    @Id("div")
    private Div div;

    public InjectedCheckboxPage() {
        checkbox.setValue(true);
    }
}

• Html template "inject-checkbox.html" is :

<link rel="import" href="/frontend/bower_components/polymer/polymer-element.html">

<dom-module id="inject-checkbox">
  <template>
    <vaadin-checkbox id="accept">Accept</vaadin-checkbox>
    <div id="div">A</div>
  </template>
  <script>
    class InjectChecbox extends Polymer.Element {
      static get is() { return 'inject-checkbox' }
    }
    customElements.define(InjectChecbox.is, InjectChecbox);
  </script>
</dom-module>

The checkbox should be checked as its value is set initially to true.
But it's shown unchecked.

In fact if one comment out the @Id("div") private Div div; java code then it works as expected.
Which means that it's caused by the presence of the another injected element via @Id.