Cloudinary select fields break other Relationship fields when using select: true

[autoboxer]

Steps to reproduce the behavior

1. Create a model with at least one Relationship field and one CloudinaryImage field.
2. Load the model in the Admin UI
3. Try to make a selection using the Relationship field

Expected behavior

The value you are trying to select should now populate the Relationship field

Actual behavior

The dropdown menu stays open and freezes without making the selection

[autoboxer]

Here's what I've found so far:

Making any selections in the Relationship field calls loadAsyncOptions(input, state, callback) in node_modules/react-select/src/Select.js. In this function there's a loop:

if (this.props.cacheAsyncResults) { // included because it may be useful
    for (var i = 0; i <= input.length; i++) {

This loop executes once for each select field on the page when the model is initially loaded, which doesn't thrown an error, and again when a selection is made in any Select, Relationship, and I believe CloudinaryImage and CloudinaryImages fields. The input argument for the loadAsyncOptions(input, ...) function is an Array containing an Object for populated Relationship fields, and an empty Array for non-populated Relationship fields. The issue seems to be that the value for input for unpopulated CloudinaryImage fields is undefined, causing a JavaScript error when checking input.length in the for loop.

[autoboxer]

following from the fix by LiquidHelium in his commit 'Don't cache relationship options', a similar change to the CloudinaryImage field type fixes this as well.

Changing:

<div className='image-select'>
    <Select
        placeholder='Search for an image from Cloudinary ...'
        className='ui-select2-cloudinary'
        name={this.props.paths.select}
        id={'field_' + this.props.paths.select}
        asyncOptions={getOptions}
    />
</div>

to:

<div className='image-select'>
    <Select
        placeholder='Search for an image from Cloudinary ...'
        className='ui-select2-cloudinary'
        name={this.props.paths.select}
        id={'field_' + this.props.paths.select}
        asyncOptions={getOptions}
        cacheAsyncResults={false}
    />
</div>

fixes the issue. Creating a pull request for the change.

[JedWatson]

Should be fixed by #3849