fix: multi select creatable integrated

Author: vip-git

src/Form.jsx

@@ -54,13 +54,6 @@ class Form extends React.Component {
   onSubmit = () => {
     this.props.onSubmit({ formData: this.state.data });
   }
-  handleCreatableSelectChange = (value, actionMeta) => {
-    console.group('Value Changed');
-    console.log(value);
-    console.log(`action: ${actionMeta.action}`);
-    console.groupEnd();
-    this.setState({ value }, this.notifyChange);
-  };
   handleCreatableSelectInputChange = (inputValue) => {
     this.setState({ inputValue }, this.notifyChange);
   };
@@ -88,12 +81,7 @@ class Form extends React.Component {
             path={''}
             data={this.state.data}
             id={id}
-            inputValue={this.state.inputValue}
-            creatableSelectValue={this.state.value}
             onChange={this.onChange}
-            onKeyDown={this.handleCreatableSelectKeyDown}
-            onCreatableSelectChange={this.handleCreatableSelectChange}
-            onInputChange={this.handleCreatableSelectInputChange}
             onSubmit={this.onSubmit}
             validation={validation}
             onMoveItemUp={this.onMoveItemUp}

src/demo/examples/simple/form-data.json

@@ -3,5 +3,6 @@
   "lastName": "Norris",
   "age": 75,
   "password": "noneed",
+  "creatableSelectTest": "[{\"label\":\"hello\",\"value\":\"hello\"},{\"label\":\"yes\",\"value\":\"yes\"}]",
   "selectTest": "[{\"key\":\"220\",\"value\":\"Vanaf 6 jaar\",\"allowableOptionValues\":{\"210\":\"Alle Leeftijden\",\"220\":\"Vanaf 6 jaar\",\"225\":\"Vanaf 9 jaar\",\"230\":\"Vanaf 12 jaar\",\"240\":\"Vanaf 16 jaar\",\"250\":\"Vanaf 18 jaar\"}},{\"key\":\"210\",\"value\":\"Alle Leeftijden\",\"allowableOptionValues\":{\"210\":\"Alle Leeftijden\",\"220\":\"Vanaf 6 jaar\",\"225\":\"Vanaf 9 jaar\",\"230\":\"Vanaf 12 jaar\",\"240\":\"Vanaf 16 jaar\",\"250\":\"Vanaf 18 jaar\"}},{\"key\":\"225\",\"value\":\"Vanaf 9 jaar\",\"allowableOptionValues\":{\"210\":\"Alle Leeftijden\",\"220\":\"Vanaf 6 jaar\",\"225\":\"Vanaf 9 jaar\",\"230\":\"Vanaf 12 jaar\",\"240\":\"Vanaf 16 jaar\",\"250\":\"Vanaf 18 jaar\"}}]"
 }

src/fields/components/CreatableSelect.jsx

@@ -1,42 +1,10 @@
 import React from 'react';
 import CreatableSelect from './lib/CreatableReactSelect';
 
-export default ({ type, value, creatableSelectValue, inputValue, options, label, nullOption, onChange, onKeyDown, onInputChange, ...rest }) => {
-  console.log('value is', creatableSelectValue);
-  let newVal = (creatableSelectValue) ? JSON.parse(creatableSelectValue) : [];
-  let newInputVal = inputValue;
-  console.log('onChange is', onChange);
-
-  const createOption = label => ({
-    label,
-    value: label,
-  });
-
-  const handleCreatableSelectKeyDown = (event) => {
-    if (!newInputVal) return;
-    const finalVal = (value) ? [...JSON.parse(value), createOption(newInputVal)] : [createOption(newInputVal)];
-    switch (event.key) {
-      case 'Enter':
-      case 'Tab':
-        console.group('Value Added');
-        console.log(finalVal);
-        console.groupEnd();
-        newVal = finalVal;
-        newInputVal = '';
-        event.preventDefault();
-        break;
-      default:
-        break;
-    }
-  };
-  return (
+export default ({ type, value, label, onChange, ...rest }) => (
     <CreatableSelect 
-      value={newVal}
-      inputValue={newInputVal}
+      value={(value) ? JSON.parse(value) : []}
       onChange={onChange} 
-      onKeyDown={handleCreatableSelectKeyDown}
-      onInputChange={onInputChange}
       label={label}
     />
-  );
-};
+);

src/fields/components/Picker.jsx

@@ -3,8 +3,6 @@ import DatePicker from 'material-ui-pickers/DatePicker';
 import TimePicker from 'material-ui-pickers/TimePicker';
 import DateTimePicker from 'material-ui-pickers/DateTimePicker';
 
-const doOnChange = onChange => (e, checked) => onChange(checked);
-
 const renderPickerComp = (type) => {
   switch (type) {
     case 'material-date':

src/fields/components/lib/CreatableReactSelect.jsx

@@ -6,6 +6,11 @@ const components = {
   DropdownIndicator: null,
 };
 
+const createOption = label => ({
+  label,
+  value: label,
+});
+
 const colourStyles = {
   control: styles => ({
     ...styles,
@@ -26,7 +31,51 @@ const colourStyles = {
 };
 
 export default class CreatableInputOnly extends Component {
+  state = {
+    inputValue: '',
+    value: [],
+  };
+
+  componentWillMount = () => {
+    this.setState({
+      value: this.props.value,
+    });
+  }
+
+  handleChange = (value, actionMeta) => {
+    console.group('Value Changed');
+    console.log(value);
+    console.log(`action: ${actionMeta.action}`);
+    console.groupEnd();
+    this.props.onChange(value);
+    this.setState({ value });
+  };
+
+  handleInputChange = (inputValue) => {
+    this.setState({ inputValue });
+  };
+
+  handleKeyDown = (event) => {
+    const { inputValue, value } = this.state;
+    if (!inputValue) return;
+    switch (event.key) {
+      case 'Enter':
+      case 'Tab':
+        console.group('Value Added');
+        console.log(value);
+        console.groupEnd();
+        const finalValue = [...value, createOption(inputValue)];
+        this.props.onChange(finalValue);
+        this.setState({
+          inputValue: '',
+          value: finalValue,
+        });
+        event.preventDefault();
+    }
+  };
+
   render() {
+    const { inputValue, value } = this.state;
     return (
       <div>
         <span style={{
@@ -40,16 +89,16 @@ export default class CreatableInputOnly extends Component {
         </span>
         <CreatableReactSelect
           components={components}
-          inputValue={this.props.inputValue}
+          inputValue={inputValue}
           isClearable
           isMulti
           menuIsOpen={false}
-          onChange={this.props.onChange}
-          onInputChange={this.props.onInputChange}
-          onKeyDown={this.props.onKeyDown}
+          onChange={this.handleChange}
+          onInputChange={this.handleInputChange}
+          onKeyDown={this.handleKeyDown}
           styles={colourStyles}
           placeholder={'Type something and press enter...'}
-          value={this.props.value}
+          value={value}
         />
       </div>
     );

src/fields/configure/get-component-props.js

@@ -28,7 +28,7 @@ const coerceValue = (type, value) => {
 const onChangeHandler = (onChange, type, widget, options) => (e) => {
   const value = (type === 'material-date' || type === 'material-time' || type === 'material-datetime') ?
                   e.format() : 
-                  (widget === 'material-multiselect' || widget === 'material-select') ?  
+                  (widget === 'material-multiselect' || widget === 'material-select' || widget === 'creatable-select') ?  
                     coerceValue(type, JSON.stringify(e))
                     : (options === 'rich-text-editor') ? serializer.serialize(e) : coerceValue(type, e.target.value);
   if (value !== undefined) onChange(value);
@@ -89,14 +89,6 @@ export default ({ schema = {}, uiSchema = {}, inputValue, onChange, onKeyDown, c
     rv.rows = 5;
   }
 
-  if (widget === 'creatable-select') {
-    rv.onKeyDown = onKeyDown;
-    rv.onInputChange = onInputChange;
-    rv.onChange = onCreatableSelectChange;
-    rv.inputValue = inputValue;
-    rv.creatableSelectValue = creatableSelectValue;
-  }
-
   if (options.disabled) {
     if (typeof options.disabled === 'boolean') {
       rv.disabled = options.disabled;