Display choice title for selected choices in multiselect input

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, convertType, getCoordsFromName} from '../util';
+import {EditorContext, getCsrfCookie, capitalize, convertType, getCoordsFromName, choicesValueTitleMap} from '../util';
 
 
 export function Label(props) {
@@ -213,6 +213,7 @@ export class FormMultiSelectInput extends React.Component {
                         inputRef={this.input}
                         onClick={this.toggleOptions}
                         value={this.props.value}
+                        options={this.props.options}
                         onChange={this.handleChange}
                         disabled={this.props.readOnly}
                         placeholder={this.props.placeholder}
@@ -251,6 +252,7 @@ export class FormMultiSelectInputField extends React.Component {
     }
 
     render() {
+        let valueTitleMap = choicesValueTitleMap(this.props.options)
         return (
             <div
                 className="rjf-multiselect-field-input"
@@ -262,7 +264,7 @@ export class FormMultiSelectInputField extends React.Component {
                 this.props.value.length ?
                 this.props.value.map((item, index) => (
                     <span className="rjf-multiselect-field-input-item" key={item + '_' + index}>
-                        <span>{item}</span>
+                        <span>{valueTitleMap[item]}</span>
                         {this.props.disabled || <button title="Remove" type="button" onClick={(e) => this.handleRemove(e, index)}>&times;</button>}
                     </span>
                     )

src/util.js

@@ -190,6 +190,33 @@ export function getKey(obj, key, default_value) {
 }
 
 
+export function choicesValueTitleMap(choices) {
+    /* Returns a mapping of {value: title} for the given choices.
+     * E.g.:
+     *      Input: [{'title': 'One', 'value': 1}, 2]
+     *      Output: {1: 'One', 2: 2}
+    */
+
+    let map = {};
+
+    for (let i = 0; i < choices.length; i++) {
+        let choice = choices[i];
+        let value, title;
+        if (actualType(choice) === 'object') {
+            value = choice.value;
+            title = choice.title;
+        } else {
+            value = choice;
+            title = choice;
+        }
+
+        map[value] = title;
+    }
+
+    return map;
+}
+
+
 export function valueInChoices(schema, value) {
     /* Checks whether the given value is in schema choices or not.
        If schema doesn't have choices, returns true.