Polymer paper-radio-button binding does not work.

[AndrzejT]

Hello,

I'm trying to 'port' radio button usage from http://ilikekillnerds.com/2015/10/working-with-forms-in-aurelia/ to aurelia/polymer.

Here are the relevant code snippets:

JS:

 ...
selectedAnnotationOption = 'Ready';

AnnotationOptions = [ 'Ready', 'Add Annotation', 'Edit Annotation Text', 'Delete Annotation'];

 AnnotationEditorOnOff()
 {
    console.warn("AnnotationEditorOnOff called");
...
}
.....

HTML:

<form is="iron-form" role="form">
    <paper-radio-group selected="Ready">
          <label repeat.for="option of AnnotationOptions"> <BR>
           <paper-radio-button
                 value.bind="option"
                  name="annotationOptions"
                  checked.bind="$parent.selectedAnnotationOption"
                  change.delegate="AnnotationEditorOnOff()" >${option}
           </label>
      </paper-radio-group>
</form>

---

ALL 4 options are selected after the page is loaded. My AnnotationEditorOnOff delegate is called after clicking at any option, but the selectedAnnotationOption never changes its 'Ready' value.

Needless to say: after replacing the above paper-radio-button code by:

                            <input type="radio"
                                   value.bind="option"
                                   name="annotationOptions"
                                   checked.bind="$parent.selectedAnnotationOption"
                                   change.delegate="AnnotationEditorOnOff()"
                            >${option}

and removing paper-radio-group, the binding works again.

[bnavetta]

Your condition for checked.bind should be $parent.selectedAnnotationOption === option to compare the selected option to the option for each radio button. $parent.selectedAnnotationOption will be a string that evaluates to true, so every button would be checked. There's also the problem from #12, where Aurelia inserts a <template> element that Polymer's selection behavior is configured to ignore. As a workaround, wrapping the buttons in a <div> seems to work:

<paper-radio-group selected="Ready">
      <div repeat.for="option of AnnotationOptions">
        <paper-radio-button
          value.bind="option"
          name="annotationOptions"
          checked.bind="$parent.selectedAnnotationOption === option"
          change.delegate="AnnotationEditorOnOff()">
          ${option}
        </paper-radio-button>
      </div>
</paper-radio-group>

[AndrzejT]

I tested it (with and without <form is="iron-form" role="form"> around the whole block). The "Ready" option is selected now at the beginning, the others are not (as it should be). BUT now the radio grouping seems to be broken - selecting an option does NOT de-select the other options. So they work like checkboxes now.

[bnavetta]

I think this and a lot of the other selection issues like #12 and #17 come down to PolymerElements/iron-selector#42, where it's not looking into nested elements, either the <div> or the <template> Aurelia generates. For now, I'm not sure what a workaround would be (maybe patching Polymer?)

[bnavetta]

Could you try the au-select attribute and see if that helps?