Having multiple components with radio buttons makes it so that only one of them is visibly selected at a time

[cravindra]

• I'm submitting a ...
  • bug report
  • feature request
  • support request => Please do not submit support request here, see note at the top of this template.

• Do you want to request a feature or report a bug?
  Report a Bug

• What is the current behavior?
  Having multiple component instances with radio buttons makes it so that only one of them is visibly selected at a time

• If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem
  https://jsfiddle.net/pa8qu42v/10/

• What is the expected behavior?
  All form radios must show their selected state at all times

• What is the motivation / use case for changing the behavior?
  It is the expected behavior in most cases

• Please tell us about your environment:

  • Version: [2.X.X | 3.0.0-beta.X]
  • Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  • Language: [all | TypeScript X.X | ES6/7 | ES5 | Dart]

• Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)

If someone can point me to what might be causing this, I'd be happy to raise a PR to help fix it

[cravindra]

On further investigation, it appears to me that the issue is mainly due to the fact the the name attribute on the input[type=radio] element is assigned to this.schema.model which will be the same if multiple instances of the form are rendered with radio buttons which share a model name.

This means that the browser will treat all radio buttons as part of the same radio group. Is there an instance-level value that can be used as a prefix that can fix this?

This can even happen for example if two separate forms use radio buttons which happen to have the same key that they write to.

Potential Fixes:

1. Introduce an instance-level unique identifier which will default to a random hash which can be used as prefixes for elements which behave like the radio group

2. At the field level, auto prefix with a randomly generated hash to ensure grouping across instances is respected

Option 2 would have the least impact in terms of API changes.. Will see if I can code it up