PolymerElements/paper-radio-group

paper-radio-button in paper-radio-group can be deselected with cursor keys

Closed this issue · 3 comments

paper-radio-buttons in a paper-radio-group can be deselected with cursor keys

Steps to reproduce:

  1. Use this code:
<paper-radio-group selected="{{selectedHeatingLayer}}">
    <paper-radio-button disabled="{{!showHeatingLayer}}" name="xx">XX</paper-radio-button><br>
    <paper-radio-button disabled="{{!showHeatingLayer}}" name="yy">YY</paper-radio-button><br>
</paper-radio-group>
  1. You can't unselect the paper-radio-buttons by clicking them.
  2. However, if the first paper-radio-button is focused and you hit the Down key (on the keyboard), the selection disappears and nothing is selected. If you press Down again, the second radio button will be selected.

Or is this intended behaviour and I did get something wrong?

Hmm, up/down and left/right should just cycle through the radio buttons and select the next/previous available (i.e. not disabled) one (see: https://elements.polymer-project.org/elements/paper-radio-group?view=demo:demo/index.html)

You're seeing the problem because of the <br> tags in between the radio buttons. While I'm working on fixing that, you can just remove the <br> and add:

paper-radio-button {
  display: block;
}

(this is probably cleaner anyway)

Wow, this was fast. Thanks.

@rfc2822 No worries, it was an easy fix (I sent out a PR so that it skips the <br>s too). 🎊