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.

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

回答1:

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

来源：https://stackoverflow.com/questions/24735215/paper-radio-button-ripple-persist-after-selection-change

标签

dart

dart-polymer

material-design

paper-elements