use select widget to render oneOf / anyOf control

src/components/fields/MultiSchemaField.js

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 import * as types from "../../types";
-import { guessType } from "../../utils";
+import { guessType, getWidget } from "../../utils";
 import { isValid } from "../../validate";
 
 class AnyOfField extends Component {
@@ -85,8 +85,8 @@ class AnyOfField extends Component {
     return 0;
   }
 
-  onOptionChange = event => {
-    const selectedOption = parseInt(event.target.value, 10);
+  onOptionChange = option => {
+    const selectedOption = parseInt(option, 10);
     const { formData, onChange, options } = this.props;
 
     const newOption = options[selectedOption];
@@ -119,7 +119,7 @@ class AnyOfField extends Component {
     }
 
     this.setState({
-      selectedOption: parseInt(event.target.value, 10),
+      selectedOption: parseInt(option, 10),
     });
   };
 
@@ -141,7 +141,9 @@ class AnyOfField extends Component {
     } = this.props;
 
     const _SchemaField = registry.fields.SchemaField;
+    const { widgets } = registry;
     const { selectedOption } = this.state;
+    const Widget = getWidget({ type: "string" }, "select", widgets);
 
     const option = options[selectedOption] || null;
     let optionSchema;
@@ -154,22 +156,21 @@ class AnyOfField extends Component {
         : Object.assign({}, option, { type: baseType });
     }
 
+    const enumOptions = options.map((option, index) => ({
+      label: option.title || `Option ${index + 1}`,
+      value: index,
+    }));
+
     return (
       <div className="panel panel-default panel-body">
         <div className="form-group">
-          <select
-            className="form-control"
+          <Widget
+            schema={{ type: "string", default: 0 }}
             onChange={this.onOptionChange}
             value={selectedOption}
-            id={`${idSchema.$id}_anyof_select`}>
-            {options.map((option, index) => {
-              return (
-                <option key={index} value={index}>
-                  {option.title || `Option ${index + 1}`}
-                </option>
-              );
-            })}
-          </select>
+            id={`${idSchema.$id}_anyof_select`}
+            options={{ enumOptions }}
+          />
         </div>
 
         {option !== null && (

test/MultiSchemaField_test.js

@@ -0,0 +1,55 @@
+import React from "react";
+import { expect } from "chai";
+import { Simulate } from "react-addons-test-utils";
+
+import { createFormComponent } from "./test_utils";
+
+describe("MultiSchemaField", () => {
+  it("should render the SelectWidget by default", () => {
+    const { node } = createFormComponent({
+      schema: {
+        oneOf: [
+          {
+            type: "string",
+            title: "String Option",
+          },
+          {
+            type: "number",
+            title: "Number Option",
+          },
+        ],
+      },
+    });
+
+    expect(node.querySelectorAll(".form-control")[0].tagName).eql("SELECT");
+    expect(node.querySelectorAll(".form-control option").length).eql(2);
+    expect(node.querySelector("label").textContent).eql("String Option");
+
+    Simulate.change(node.querySelector("select"), {
+      target: { value: "1" },
+    });
+    expect(node.querySelector("label").textContent).eql("Number Option");
+  });
+
+  it("should render a custom select widget", () => {
+    const { node } = createFormComponent({
+      schema: {
+        oneOf: [
+          {
+            type: "string",
+          },
+          {
+            type: "number",
+          },
+        ],
+      },
+      widgets: {
+        SelectWidget: () => {
+          return <div className="custom-select-widget" />;
+        },
+      },
+    });
+
+    expect(node.querySelectorAll(".custom-select-widget").length).eql(1);
+  });
+});