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

Bound boolean isn't set from true to false when radio button is unchecked #291

Closed
sethladd opened this issue Sep 23, 2013 · 9 comments
Closed

Bound boolean isn't set from true to false when radio button is unchecked #291

sethladd opened this issue Sep 23, 2013 · 9 comments

Comments

@sethladd
Copy link

Going from false to true sets the bound boolean, but going from true to false does not set the bound boolean back to false.

Here's the test:

<!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>

/cc @ebidel
@sorvell
Copy link
Contributor

sorvell commented Sep 23, 2013

+@rafaelw

@sorvell
Copy link
Contributor

sorvell commented Sep 24, 2013

Functionality of input type radio came up before and led to us making an example that works with polymer-selector. It's available at the bottom of the example file here: https://github.com/Polymer/polymer-elements/blob/master/polymer-selector/index.html

@ebidel
Copy link
Contributor

ebidel commented Sep 24, 2013

@sethladd and I also came up with http://jsbin.com/iXuSOCO/2/edit as a raw radio button solution.

@ghost ghost assigned rafaelw and ebidel Sep 25, 2013
@sethladd
Copy link
Author

Thanks guys, those are good workarounds. I was hoping that this bug report is a fine-grained and distilled repro of what is possibly indicative of a bug.

Does HTML fire a changed event when a radio button goes from true to false? I'll need to investigate.

@sorvell
Copy link
Contributor

sorvell commented Sep 25, 2013

Re: the change event, I don't think so.

I'll let @rafaelw weigh in on supporting this better in Node.bind.

On Sep 24, 2013, at 6:11 PM, Seth Ladd notifications@github.com wrote:

Thanks guys, those are good workarounds. I was hoping that this bug report
is a fine-grained and distilled repro of what is possibly indicative of a
bug.

Does HTML fire a changed event when a radio button goes from true to false?
I'll need to investigate.

—
Reply to this email directly or view it on
GitHubhttps://github.com//issues/291#issuecomment-25055626
.

@peterwmwong
Copy link
Contributor

Some observations...

I think it's NodeBind.js getAssociatedRadioButtons() that prevents the radio button from being checked because:

  1. element.ownerDocument.contains(element)) returns false, cause element (the input) is in the Shadow DOM and the polyfill contains() isn't smart enough to look there... possible fix & test
  2. If # 1 was fixed and if the radio buttons were wrapped in a form, you'd blow up here because HTMLFormElement.elements does not wrap it's items... possible fix & test
  3. If # 1 was fixed and the radio buttons weren't wrapped in a form (just like the examples above), still broken cause ownerDocument.querySelectorAll() won't find the inputs in the ShadowDOM... Should it look inside the shadowRoot instead?

Hope this helps.

@sethladd
Copy link
Author

Thanks Peter. Someone on the list brought up the getAssociatedRadioButtons diagnosis as well.

@rafaelw
Copy link
Contributor

rafaelw commented Sep 25, 2013

Yup. getAssociatedRadioButtons needed to be tolerant of associated radio buttons within a ShadowRoot.

Fixed here: googlearchive/NodeBind@9978535

@rafaelw rafaelw closed this as completed Sep 25, 2013
@sethladd
Copy link
Author

Very cool, thanks Raf!

@DartBot DartBot mentioned this issue Jun 3, 2015
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@sethladd @sorvell @ebidel @peterwmwong @rafaelw