Use index for value in SelectWidget

packages/core/playground/samples/enumObjects.js

@@ -0,0 +1,47 @@
+module.exports = {
+  schema: {
+    definitions: {
+      locations: {
+        enumNames: ["New York", "Amsterdam", "Hong Kong"],
+        enum: [
+          {
+            name: "New York",
+            lat: 40,
+            lon: 74,
+          },
+          {
+            name: "Amsterdam",
+            lat: 52,
+            lon: 5,
+          },
+          {
+            name: "Hong Kong",
+            lat: 22,
+            lon: 114,
+          },
+        ],
+      },
+    },
+    type: "object",
+    properties: {
+      location: {
+        title: "Location",
+        $ref: "#/definitions/locations",
+      },
+      multiSelect: {
+        type: "array",
+        uniqueItems: true,
+        items: {
+          $ref: "#/definitions/locations",
+        },
+      },
+    },
+  },
+  formData: {
+    location: {
+      name: "Amsterdam",
+      lat: 52,
+      lon: 5,
+    },
+  },
+};

packages/core/src/components/widgets/SelectWidget.js

@@ -1,49 +1,47 @@
 import React from "react";
 import PropTypes from "prop-types";
+import _isEqual from "lodash/isEqual";
 
-import { asNumber, guessType } from "../../utils";
-
-const nums = new Set(["number", "integer"]);
-
-/**
- * This is a silly limitation in the DOM where option change event values are
- * always retrieved as strings.
- */
-function processValue(schema, value) {
-  // "enum" is a reserved word, so only "type" and "items" can be destructured
-  const { type, items } = schema;
-  if (value === "") {
+function getValue(event, enumOptions, multiple) {
+  if (event.target.value === "") {
     return undefined;
-  } else if (type === "array" && items && nums.has(items.type)) {
-    return value.map(asNumber);
-  } else if (type === "boolean") {
-    return value === "true";
-  } else if (type === "number") {
-    return asNumber(value);
-  }
-
-  // If type is undefined, but an enum is present, try and infer the type from
-  // the enum values
-  if (schema.enum) {
-    if (schema.enum.every(x => guessType(x) === "number")) {
-      return asNumber(value);
-    } else if (schema.enum.every(x => guessType(x) === "boolean")) {
-      return value === "true";
-    }
   }
-
-  return value;
-}
-
-function getValue(event, multiple) {
   if (multiple) {
     return [].slice
       .call(event.target.options)
       .filter(o => o.selected)
-      .map(o => o.value);
+      .map(o => enumOptions[o.value].value);
   } else {
-    return event.target.value;
+    return enumOptions[event.target.value].value;
+  }
+}
+
+function getOneSelected(value, enumOptions) {
+  if (typeof value === "undefined") {
+    return "";
+  }
+
+  for (const i in enumOptions) {
+    if (_isEqual(enumOptions[i].value, value)) {
+      return i;
+    }
+  }
+  return "";
+}
+
+function getMultipleSelected(values, enumOptions) {
+  if (!Array.isArray(values)) {
+    return [];
+  }
+  let selected = [];
+  for (const i in enumOptions) {
+    for (const value of values) {
+      if (_isEqual(enumOptions[i].value, value)) {
+        selected.push(i);
+      }
+    }
   }
+  return selected;
 }
 
 function SelectWidget(props) {
@@ -63,41 +61,40 @@ function SelectWidget(props) {
     placeholder,
   } = props;
   const { enumOptions, enumDisabled } = options;
-  const emptyValue = multiple ? [] : "";
+  const selected = multiple
+    ? getMultipleSelected(value, enumOptions)
+    : getOneSelected(value, enumOptions);
   return (
     <select
       id={id}
       multiple={multiple}
       className="form-control"
-      value={typeof value === "undefined" ? emptyValue : value}
+      value={selected}
       required={required}
       disabled={disabled || readonly}
       autoFocus={autofocus}
       onBlur={
         onBlur &&
         (event => {
-          const newValue = getValue(event, multiple);
-          onBlur(id, processValue(schema, newValue));
+          onBlur(id, getValue(event, enumOptions, multiple));
         })
       }
       onFocus={
         onFocus &&
         (event => {
-          const newValue = getValue(event, multiple);
-          onFocus(id, processValue(schema, newValue));
+          onFocus(id, getValue(event, enumOptions, multiple));
         })
       }
       onChange={event => {
-        const newValue = getValue(event, multiple);
-        onChange(processValue(schema, newValue));
+        onChange(getValue(event, enumOptions, multiple));
       }}>
       {!multiple && schema.default === undefined && (
         <option value="">{placeholder}</option>
       )}
       {enumOptions.map(({ value, label }, i) => {
         const disabled = enumDisabled && enumDisabled.indexOf(value) != -1;
         return (
-          <option key={i} value={value} disabled={disabled}>
+          <option key={i} value={i} disabled={disabled}>
             {label}
           </option>
         );

packages/playground/src/samples/index.js

@@ -2,6 +2,7 @@ import arrays from "./arrays";
 import anyOf from "./anyOf";
 import oneOf from "./oneOf";
 import allOf from "./allOf";
+import enumObjects from "./enumObjects";
 import nested from "./nested";
 import numbers from "./numbers";
 import simple from "./simple";
@@ -52,6 +53,7 @@ export const samples = {
   "Any Of": anyOf,
   "One Of": oneOf,
   "All Of": allOf,
+  "Enumerated objects": enumObjects,
   "Null fields": nullField,
   Nullable: nullable,
   ErrorSchema: errorSchema,