Issue with compareOption Uncaught TypeError: Cannot read property 'toLowerCase' of undefined

I found an issue with compareOption function when changes getOptionValue and getOptionLabel to a different (value|label) structure.= using with AsyncCreatable.

Follow the example to replicate.

The options are loaded from an endpoint using callback handler, with the JSON structure: [{ id: 1, name: 'teste1' }, { id: 2, name: 'teste2' }, { id: 3, name: 'teste3' } ]

const customFilter = createFilter({
      ignoreCase: false,
      ignoreAccents: false,
      trim: false,
      matchFrom: 'any',
    });

<AsyncCreatableSelect
        name="tag"
        id="tag"
        isMulti
        isClearable
        placeholder="Marque algumas tags para este registro"
        getOptionValue={option => option.id}
        getOptionLabel={option => option.id}
        filterOption={customFilter}
        loadingMessage={e => `Carregando opções próximas de '${e.inputValue}'`}
        noOptionsMessage={e => `Sem opções disponíveis para escolha`}
        formatCreateLabel={e => `Criar uma nova tag com rótulo '${e}'`}
        components={{ Option: Option, ...makeAnimated() }}
        loadOptions={loadOptions}
       
      />

Uncaught TypeError: Cannot read property ‘toLowerCase’ of undefined at compareOption (Creatable.js?067d:40) at eval (Creatable.js?067d:51) at Array.some (<anonymous>) at isValidNewOption (Creatable.js?067d:50) at Creatable.componentWillReceiveProps (Creatable.js?067d:133) at callComponentWillReceiveProps (react-dom.development.js?cada:11528) at updateClassInstance (react-dom.development.js?cada:11720) at updateClassComponent (react-dom.development.js?cada:13154) at beginWork (react-dom.development.js?cada:13825) at performUnitOfWork (react-dom.development.js?cada:15864)

When I got the function:

var compareOption = function compareOption(inputValue, option) { var candidate = inputValue.toLowerCase(); return option.value.toLowerCase() === candidate || option.label.toLowerCase() === candidate; };

[nehaleem]

Same issue here. Cannot use Creatable because it doesnt respect getOptionValue and getOptionLabel props.

Uncaught TypeError: Cannot read property 'toLowerCase' of undefined
at compareOption (Creatable.js?067d:40)

[jkeruzec]

I think, it has already multiple PR about that subject …

I also did it by overriding :

 getNewOptionData={(inputValue, optionLabel) => {
                return {
                    id: inputValue,
                    value: optionLabel,
                    __isNew__: true};
            }}
            isValidNewOption={(inputValue, selectValue, selectOptions) => {
                
                const compareOption = (inputValue, option) => {
                    
                    const getOptionValue = (option) => option.id;
                    const getOptionLabel = (option) => option.value;
                    
                    const candidate = inputValue.toLowerCase();
                    return (
                        getOptionValue(option).toLowerCase() === candidate ||
                        getOptionLabel(option).toLowerCase() === candidate
                    );
                }
                
                return !(!inputValue ||
                selectValue.some(option => compareOption(inputValue, option)) ||
                selectOptions.some(option => compareOption(inputValue, option)));
                
            }}
            onCreateOption={inputValue => this.createNewElementFromSelect(inputValue)}