Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Radio buttons and polymer: not turning boolean to false when other option is chosen #13478

Closed
sethladd opened this issue Sep 21, 2013 · 8 comments
Closed

Radio buttons and polymer: not turning boolean to false when other option is chosen #13478

sethladd opened this issue Sep 21, 2013 · 8 comments
Labels
closed-duplicate Closed in favor of an existing report
Milestone
M8

Comments

@sethladd
Copy link
Contributor

Consider this code:

import 'package:polymer/polymer.dart';

@CustomTag('my-example')
class MyExample extends PolymerElement with ObservableMixin {
  @­observable bool blue = false;
  @­observable bool green = false;
  @­observable bool red = false;
  
  MyExample() {
    bindProperty(this, const Symbol('red'),
        () => notifyProperty(this, const Symbol('favoriteColor')));
    bindProperty(this, const Symbol('green'),
        () => notifyProperty(this, const Symbol('favoriteColor')));
    bindProperty(this, const Symbol('blue'),
        () => notifyProperty(this, const Symbol('favoriteColor')));
  }
  
  String get favoriteColor {
    String value = '';
    if (red) {
      value = 'red';
    } else if (green) {
      value = 'green';
    } else if (blue) {
      value = 'blue';
    }
    return value;
  }
}

<!DOCTYPE html>

<polymer-element name="my-example">
  <template>
    <div>
      Your favorite color is:
      <div>
        <label for="red">Red <input name="color" type="radio" id="red" value="red" checked="{{red}}"></label>
      </div>
      <div>
        <label for="green">Green <input name="color" type="radio" id="green" value="green" checked="{{green}}"></label>
      </div>
      <div>
        <label for="blue">Blue <input name="color" type="radio" id="blue" value="blue" checked="{{blue}}"></label>
      </div>
    </div>
    <div>
      You selected {{favoriteColor}}
    </div>
  </template>
  <script type="application/dart" src="my_example.dart"></script>
</polymer-element>

When I run this, and select blue, I get "you selected blue". Good. When I select blue, I get "you selected green". When I open the debugger, I see that green remains true, even though I changed the radio button.

Attachment:
[Screen Shot 2013-09-21 at 10.57.14 AM.png](https://storage.googleapis.com/google-code-attachments/dart/issue-13478/comment-0/Screen Shot 2013-09-21 at 10.57.14 AM.png) (9.06 KB)
@jmesserly
Copy link

How does this compare to Polymer.js?
I have a feeling they'll have similar behavior. It is worth following up with them to understand the design of radio buttons

Added NeedsInfo label.

@sethladd
Copy link
Contributor Author

Sure enough, the JS version also has the same problem:

<!DOCTYPE html>

<html>
  <head>
    <title>index</title>
    <script src="polymer.min.js"></script>
  </head>
  <body>

<polymer-element name="my-example">
  <template>
    <div>
      Your favorite color is:
      <div>
        <label for="red">Red <input name="color" type="radio" id="red" value="red" checked="{{red}}"></label>
      </div>
      <div>
        <label for="green">Green <input name="color" type="radio" id="green" value="green" checked="{{green}}"></label>
      </div>
      <div>
        <label for="blue">Blue <input name="color" type="radio" id="blue" value="blue" checked="{{blue}}"></label>
      </div>
    </div>
    <div>
      You selected {{favoriteColor}}
    </div>
  </template>
  <script>
  Polymer('my-example', {
      red: false,
      green: false,
      blue: false,
      get favoriteColor() {
          if (this.red) {
              return 'red';
          } else if (this.blue) {
              return 'blue';
          } else if (this.green) {
              return 'green';
          }
      }
  });
  </script>
</polymer-element>

<my-example></my-example>

</body>
</html>

I find it odd that the browser doesn't change a previous radio checkbox state when a new one is checked.

The work-around is to listen for changes to a radio property, and manually set all the others to false.

I ended up doing this just to get it to work:

  MyExample() {
    bindProperty(this, const Symbol('red'), () {
        if (red) {
          green = false;
          blue = false;
        }
        notifyProperty(this, const Symbol('favoriteColor'));
      });
    bindProperty(this, const Symbol('green'), () {
        if (green) {
          red = false;
          blue = false;
        }
        notifyProperty(this, const Symbol('favoriteColor'));
      });
    bindProperty(this, const Symbol('blue'), () {
        if (blue) {
          red = false;
          green = false;
        }
        notifyProperty(this, const Symbol('favoriteColor'));
      });
  }

@DartBot
Copy link

DartBot commented Sep 26, 2013

This comment was originally written by @sethladd

Fixed in polymer.js: Polymer/polymer#291 (maybe? but does fix the issue w/ working with the shadow dom)

@jmesserly
Copy link

@seth, yeah, it sounds like it fixes exactly this issue.

@jmesserly
Copy link

(the bug was in MDV getAssociatedRadioButtons)

Removed Library-PolymerExpressions label.
Added Library-MDV label.

@sethladd
Copy link
Contributor Author

sethladd commented Oct 2, 2013

Thanks for checking!

Marking medium because we have a workaround, but it would be really nice to apply this patch :)

Removed Priority-Unassigned label.
Added Priority-Medium, Triaged labels.

@sigmundch
Copy link
Member

Added this to the M8 milestone.

@sigmundch
Copy link
Member

Added Duplicate label.
Marked as being merged into #13950.

@sethladd sethladd added Type-Defect closed-duplicate Closed in favor of an existing report labels Oct 9, 2013
@sethladd sethladd added this to the M8 milestone Oct 9, 2013
@sigmundch sigmundch mentioned this issue Jun 3, 2015
Closed
This issue was closed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
closed-duplicate Closed in favor of an existing report
Projects
None yet
Milestone
M8
Development

No branches or pull requests
4 participants
@sethladd @jmesserly @sigmundch @DartBot