fix: populate id for radio boolean fields, fixes #1139

src/components/widgets/RadioWidget.js

@@ -10,14 +10,15 @@ function RadioWidget(props) {
  readonly,
  autofocus,
  onChange,
+ id,
  } = props;
  // Generating a unique field name to identify this set of radio buttons
  const name = Math.random().toString();
  const { enumOptions, enumDisabled, inline } = options;
  // checked={checked} has been moved above name={name}, As mentioned in #349;
  // this is a temporary fix for radio button rendering bug in React, facebook/react#7630.
  return (
- <div className="field-radio-group">
+ <div className="field-radio-group" id={id}>
  {enumOptions.map((option, i) => {
  const checked = option.value === value;
  const itemDisabled =

test/BooleanField_test.js

@@ -30,6 +30,16 @@ describe("BooleanField", () => {
  ).to.have.length.of(1);
  });
 
+ it("should render a boolean field with the expected id", () => {
+ const { node } = createFormComponent({
+ schema: {
+ type: "boolean",
+ },
+ });
+
+ expect(node.querySelector(".field input[type=checkbox]").id).eql("root");
+ });
+
  it("should render a boolean field with a label", () => {
  const { node } = createFormComponent({
  schema: {
@@ -107,6 +117,17 @@ describe("BooleanField", () => {
  expect(node.querySelector(".field input").checked).eql(true);
  });
 
+ it("should render radio widgets with the expected id", () => {
+ const { node } = createFormComponent({
+ schema: {
+ type: "boolean",
+ },
+ uiSchema: { "ui:widget": "radio" },
+ });
+
+ expect(node.querySelector(".field-radio-group").id).eql("root");
+ });
+
  it("should have default enum option labels for radio widgets", () => {
  const { node } = createFormComponent({
  schema: {