react-select AsyncSelect loadOptions through React.cloneElement

Question

I have a config file with some fields for generating input elements inside a component. I'm trying to generate an AsyncSelect input field and assigning it loadOptions prop through the config. Problem is that the function never gets called. Here's the object in the configuration for generating the AsyncSelect input:

   {
        key: 'cityCode',
        value: (customer, borrower) => ({
            label: borrower.cityName,
            value: borrower.cityCode
        }),
        text: 'city',
        disabled: falseFn,
        input: REACT_ASYNC_SELECT_INPUT,
        props: (borrower, component) => ({
            inputValue: component.state.cityName,
            loadOptions: () => {
                return CitiesService.find(component.state.cityName || '')
                    .then(records => records.map(record => ({
                        label: record.name,
                        value: record.code
                    })));
            },
            onInputChange: cityName => {
              component.setState({
                  cityName
              });
            },
            onChange: ({label, value}, {action}) => {
                if (action === 'clear') {
                    component.updateCustomer(component.props.fieldKey + 'cityName', '');
                    component.updateCustomer(component.props.fieldKey + 'cityCode', -1);
                } else {
                    component.updateCustomer(component.props.fieldKey + 'cityName', label);
                    component.updateCustomer(component.props.fieldKey + 'cityCode', value);
                }
            }
        }),
        render: trueFn
    },

Here's the part of the component render utilizing the config file to render different inputs:

<div className="values">
                {
                    BorrowerInfoConfig().map(field => {
                        if (field.render(borrower)) {
                            const kebabCaseKey = _.kebabCase(field.key);
                            const fieldElement = React.cloneElement(field.input, {
                                className: `${kebabCaseKey}-input`,
                                value: field.value ? field.value(customer, borrower) : _.get(borrower, field.key),
                                onChange: e => {
                                    let value = e.target.value;
                                    if (field.options) {
                                        value = Number(value);
                                    }
                                    this.updateCustomer(fieldKey + field.key, value);
                                },
                                disabled: field.disabled(borrower),
                                ...field.props(borrower, this)
                            }, field.options ? Object.keys(field.options).map(option => <option
                                key={option}
                                className={`${kebabCaseKey}-option`}
                                value={option}>
                                {field.options[option]}
                            </option>) : null);
                            return <div key={field.key} className={`value ${kebabCaseKey}`}>
                                <span>{field.text}</span>
                                {fieldElement}
                            </div>;
                        }
                        return null;
                    })
                }
            </div>

As you can see I use React.cloneElement to clone the input from the config file and assign new properties to it depends on what I get from the config file, in this case 4 custom props: inputValue loadOptions onInputChange onChange

My problem is that loadOptions is never called, any ideas why? On the other hand inputValue is assign correctly to the cityName state of the component.

Answer 1

My Problem was that REACT_ASYNC_SELECT_INPUT references normal Select and not Select.Async.