Fix #43: Make multiselect work with other values than string

Author: bhch

src/components/form.js

@@ -2,7 +2,7 @@ import React from 'react';
 import Button from './buttons';
 import Loader from './loaders';
 import {TimePicker} from './widgets';
-import {EditorContext, getCsrfCookie, capitalize} from '../util';
+import {EditorContext, getCsrfCookie, capitalize, convertType} from '../util';
 
 
 export function FormInput({label, help_text, error, inputRef, ...props}) {
@@ -141,7 +141,11 @@ export class FormMultiSelectInput extends React.Component {
         if (e.target.checked) {
             value.push(e.target.value);
         } else {
-            value = value.filter((item) => item !== e.target.value);
+            value = value.filter((item) => {
+                if (typeof item !== this.props.valueType)
+                    convertType(item, this.props.valueType);
+                return item !== e.target.value;
+            });
         }
 
         let event = {

src/ui.js

@@ -2,7 +2,7 @@ import {getBlankData} from './data';
 import {Button, FormInput, FormCheckInput, FormRadioInput, FormSelectInput,
     FormFileInput, FormRow, FormGroup, GroupTitle, FormRowControls, FormTextareaInput,
     FormDateTimeInput, FormMultiSelectInput, FileUploader} from './components';
-import {getVerboseName} from './util';
+import {getVerboseName, convertType} from './util';
 
 
 function handleChange(e, fieldType, callback) {
@@ -15,17 +15,10 @@ function handleChange(e, fieldType, callback) {
         value = e.target.value;
     }
 
-    if (fieldType === 'number' || fieldType === 'integer') {
-        value = value.trim();
-        if (value === '')
-            value = null;
-        else if (!isNaN(Number(value)))
-            value = Number(value);
-    } else if (fieldType === 'boolean') {
-        if (value === 'false' || value === false)
-            value = false;
-        else
-            value = true;
+    if (Array.isArray(value)) { /* multiselect widget values are arrays */
+        value = value.map((item) => convertType(item, fieldType));
+    } else {
+        value = convertType(value, fieldType);
     }
 
     callback(e.target.name, value);
@@ -108,6 +101,7 @@ function FormField(props) {
             InputField = FormSelectInput;
             break;
         case 'multiselect':
+            inputProps.valueType = props.schema.type;
             InputField = FormMultiSelectInput;
             break;
         case 'textarea':

src/util.js

@@ -12,6 +12,31 @@ export function capitalize(string) {
 }
 
 
+export function convertType(value, to) {
+    if (typeof value === to)
+        return value;
+
+    if (to === 'number' || to === 'integer') {
+        if (typeof value === 'string') {
+            value = value.trim();
+            if (value === '')
+                value = null;
+            else if (!isNaN(Number(value)))
+                value = Number(value);
+        } else if (typeof value === 'boolean') {
+            value = value === true ? 1 : 0;
+        }
+    } else if (to === 'boolean') {
+        if (value === 'false' || value === false)
+            value = false;
+        else
+            value = true;
+    }
+
+    return value;
+}
+
+
 export function getVerboseName(name) {
     if (name === undefined || name === null)
         return '';