Search code examples
dartdart-polymermaterial-designpaper-elements

paper-radio-button ripple persist after selection change

Given a paper-radio-group as shown below

      <paper-radio-group
        id="sex-group"
        selected='1'>
        <paper-radio-button label='Male'></paper-radio-button><br>
        <paper-radio-button label='Female'></paper-radio-button>
      </paper-radio-group>

When the Male button is selected followed by the Female button or vice versa, inconsistently the ripple remains on the last selected button even though the selection changes. It occurs in a unpredictable manner with no stack trace.

enter image description here

In the graphic above, Female was selected followed by Male.

I am using Polymer-dart 0.12.0-dev and Dart Editor version 1.6.0.dev_03_00 (DEV) Dart SDK version 1.6.0-dev.3.0

Solution

  • According to the docs http://www.polymer-project.org/docs/elements/paper-elements.html#paper-radio-group selected of <paper-radio-group> should reference the name of <paper-radio-button>

    I tried it and it worked fine.

    <paper-radio-group
  id="sex-group"
  selected='1'>
  <paper-radio-button label='Male' name='1'></paper-radio-button><br>
  <paper-radio-button label='Female' name='2'></paper-radio-button>
</paper-radio-group>

    To add an event handler for selection change
    This doesn't work yet because a value normally passed in event.detail is needed if the event was fired for selection or deselection (it is always fired twice for each change). But this is currently not possible due to this bug https://code.google.com/p/dart/issues/detail?id=20648

    <paper-radio-group on-change="{{changeHandler}}">
  <paper-radio-button name="sel1" label="Sel 1"><paper-radio-button>
  <paper-radio-button name="sel2" label="Sel 2"><paper-radio-button>
</paper-radio-group>

    void changeHandler(Event e) {
  print(e.target.attributes['name']);
}

    Currently it seems the only way is to bind the selected attribute to a field as shown in Getting the value of a paper-radio-button