Logic on react-select for material-ui redux-form field. Supports for Async, Async-Creatable, Creatable & Normal one with single as well as milti-select

MultiSelect.js

import React from 'react';
import Select from 'react-select';
import PropTypes from 'prop-types';
import 'react-select/dist/react-select.css';

import BASE_URL from '../../constants';

const SelectType = (type, props, asyncProps) => {
  const {
    searchKey,
    getOptions,
    options,
    apiUrl,
  } = props;
  switch (type) {
    case 'Async':
      return (
        <Select.Async
          {...props}
          {...asyncProps}
          onBlurResetsInput={false}
          loadOptions={getOptions.bind(null, `${BASE_URL}${apiUrl}`, searchKey)} // eslint-disable-line
        />
      );
    case 'AsyncCreatable':
      return (
        <Select.AsyncCreatable
          {...props}
          {...asyncProps}
          onBlurResetsInput={false}
          loadOptions={getOptions.bind(null, `${BASE_URL}${apiUrl}`, searchKey)} // eslint-disable-line
        />
      );
    case 'Creatable':
      return (
        <Select.Creatable
          {...props}
          {...asyncProps}
          onBlurResetsInput={false}
        />
      );
    default:
      return (
        <Select
          {...props}
          {...asyncProps}
          options={options}
          onBlurResetsInput={false}
        />
      );
  }
};

SelectType.propTypes = {
  apiUrl: PropTypes.string,
  options: PropTypes.arrayOf(PropTypes.object),
  getOptions: PropTypes.func,
  apiParams: PropTypes.string,
  searchKey: PropTypes.string,
};

SelectType.defaultProps = {
  apiUrl: '',
  options: [],
  getOptions: () => { },
  apiParams: '',
  searchKey: '',
};

const MultiSelect = (props) => {
  const {
    type,
    input,
    meta,
  } = props;
  const { error, touched } = meta;
  // console.log('=>', input.value, props.multi);
  const asyncProps = {
    multi: props.multi,
    valueKey: props.valueKey,
    labelKey: props.labelKey,
    value: props.multi ? input.value && input.value.length > 0 // eslint-disable-line
      ? typeof input.value[0] === 'string'
        ? input.value.map(val => ({ value: val }))
        : input.value
      : [] : input.value,
    onBlur: () => input.onBlur(input.value),
    onChange: (values) => {
      if (input.onChange && values) {
        input.onChange(values);
      } else {
        input.onChange(null);
      }
      return values;
    },
  };
  return (
    <div>
      <div className={`select-wrapper ${touched && error ? 'select-wrapper-error' : ''}`}>
        {SelectType(type, props, asyncProps)}
      </div>
      {
        touched && error &&
        <p className="error">{error}</p>
      }
    </div>
  );
};

MultiSelect.propTypes = {
  input: PropTypes.object.isRequired, // eslint-disable-line
  meta: PropTypes.object.isRequired, // eslint-disable-line
  type: PropTypes.oneOf(['Async', 'AsyncCreatable', 'Creatable', '']),
  valueKey: PropTypes.string,
  labelKey: PropTypes.labelKey,
  multi: PropTypes.bool,
};

MultiSelect.defaultProps = {
  multi: true,
  type: '',
  valueKey: 'value',
  labelKey: 'value',
};

export default MultiSelect;

How to use AsyncCreatable:

                    <Field
                      type="AsyncCreatable"
                      getOptions={getOptions}
                      valueKey="id"
                      labelKey="name"
                      searchKey="customers"
                      placeholder={this.props.translate('parentCompany')}
                      apiUrl="/customers/search?parent_company="
                      component={MultiSelect}
                      componentType="multiSelect"
                      multi={false}
                      id="parentCompany"
                      name="parentCompany"
                    />

How to use simple single-select:

                    <Field
                      options={this.props.industryData}
                      valueKey="id"
                      labelKey="display_value"
                      inputProps={{
                        autoComplete: 'nope',
                      }}
                      onChange={(value) => {
                        this.props.fetchLifecycle(value.id);
                      }
                      }
                      placeholder={this.props.translate('customerIndustry')}
                      component={MultiSelect}
                      multi={false}
                      id="customerIndustry"
                      name="customerIndustry"
                    />

For multi-select just use:
multi={true}