Search code examples
vaadinpolymer-2.xvaadin10

two-way binding of paper-radio-group / paper-radio-button value with Vaadin 10


I am using beta3 of Vaadin 10 and I have a html-file bound to a Component (@HtmlImport), which contains a <dom-repeat> inside of which I have a paper-radio-group. I want the paper-radio-group#selected-property to be bound two way to my model, so that when a user selects a different radio-button, it's value will be written back to the model. Unfortunately, for me it works only as a one way model, as the java-side setter setAOrBProperty() is never called. Can someone give me a hint what I need to do to have the new value written to the server?

    <link rel="import" href="./bower_components/polymer/polymer-element.html">
<link rel="import" href="bower_components/paper-radio-button/paper-radio-button.html">
<link rel="import" href="bower_components/paper-radio-group/paper-radio-group.html">

<dom-module id=“dmmdl”>
    <template>
        <div>
            <dom-repeat items=“[[myListOfSomething]]”>
                <div>
                        <paper-radio-group selected="{{item.aOrBProperty}}” allow-empty-selection>
                          <paper-radio-button name=“a”>A</paper-radio-button>
                          <paper-radio-button name=“b”>B</paper-radio-button>
                        </paper-radio-group>
                </div>
            </template>
        </div>
    </template>
    <script>
        class BooksGridElement extends Polymer.Element {
            static get is() {
                return 'books-grid'
            }
            // only for testing !!
            // ready() {
            //     super.ready();
            //     this.books = results;
            // }
        }
        customElements.define(BooksGridElement.is, BooksGridElement);
    </script>

</dom-module>

Solution

  • I suspect this is caused by a security feature of Flow. Arbitrary model value changes from the client are not accepted for security reasons. Instead, changes are only allowed for properties that are used in two-way template bindings (i.e. {{propertyName}}) or explicitly annotated with @AllowClientUpdates on the corresponding Java getter.

    The logic that looks for {{propertyName}} doesn't have any specific knowledge about the inner workings of <dom-repeat>, so it cannot know that {{item.aOrBProperty}} corresponds to myListOfSomething[*].aOrBProperty.

    If my assumption is correct, you could fix this case by adding @AllowClientUpdates to the getAOrBProperty() method in your model interface.