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.

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

Radio buttons not working correctly #242

Closed
chenglou opened this issue Jul 30, 2013 · 3 comments · Fixed by #281
Closed

Radio buttons not working correctly #242

chenglou opened this issue Jul 30, 2013 · 3 comments · Fixed by #281

Comments

@chenglou
Copy link
Contributor

  render: function() {
    return (
      <div>
        <input type="radio" name="fruit" value="A" checked={true}/>A
        <input type="radio" name="fruit" value="B"/>B
      </div>
    );
  }

Expected behavior would be for A to stay checked when B is clicked, but it's not the case.

jsFiddle

Similarly, here's a modified version that works on every subsequent click on B, but not the first time. If this helps, setting a timeout 0 around this.refs.A.getDOMNode().checked = true works (except it gives a flash when you click on B, which is less than ideal)

@sophiebits
Copy link
Collaborator

This happens because the change event never triggers on A, only on B -- React doesn't get a chance to restore the checked state.

@zpao
Copy link
Member

zpao commented Jul 30, 2013

Paging @yungsters.

@yungsters
Copy link
Contributor

For lack of a better place to put this fiddle: http://jsfiddle.net/KfqXH/1/

I spoke with @spicyj on IRC. There will be issues if you have:

  • Radios rendered in React with name="X".
  • Radios rendered outside of React with name="X".

This is an edge case we don't think needs to be handled (partly because there might not be a way for some browsers to even detect if an arbitrary <input>'s checked property gets set).

A simple way to deal with this involves maintaining a list of all instantiated React radio inputs. Whenever one radio input's value changes, look for other radio inputs with the same name and scope and setState(...) as appropriate.

By scope, I mean inputs within the same form or not inside any form.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants