Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Support for Radios with name is insufficient

See original GitHub issue

I have searched the issues of this repository and believe that this is not a duplicate.

Version

3.4.1

Environment

Windows 10, Chrome 64, React 16.2

Reproduction link

https://jsfiddle.net/fxg8occt/9/

Steps to reproduce

Follow the jsfiddle in example or use this code

<!DOCTYPE html>
<html>
<body>

<p>In this example, there are two radio-groups in same view.</p>

  <input type="radio" name="num" value="1"> 1<br>
  <input type="radio" name="num" value="2" checked> 2<br>
  <input type="radio" name="str" value="A" checked> A<br>
  <input type="radio" name="str" value="B"> B<br>
  <input type="radio" name="num" value="3"> 3

<p><b>Note:</b> When a user clicks on a radio-button, it becomes checked, and all other radio-buttons with equal name become unchecked.</p>

<!--

Imagine these are table rows and I cannot wrap them in Groups properly.

This is not working

<Radio.Group name='num'><Radio value='1'>1</Radio></Radio.Group>
<Radio.Group name='num'><Radio value='2'>2</Radio></Radio.Group>
<Radio.Group name='str'><Radio value='A'>A</Radio></Radio.Group>
<Radio.Group name='str'><Radio value='B'>B</Radio></Radio.Group>
<Radio.Group name='num'><Radio value='3'>3</Radio></Radio.Group>

This is also not working

<Radio name='num' value='1'>1</Radio>
<Radio name='num' value='2'>2</Radio>
<Radio name='str' value='A'>A</Radio>
<Radio name='str' value='B'>B</Radio>
<Radio name='num' value='3'>3</Radio>

-->

</body>
</html>

What is expected?

Expected is that if I have for example a table and some of the rows belong to group A and others to group B I will get automatic behavior as is specified in HTML Radio Button Specification.