CreatableSelect doesn't create new options if used with filterOption prop

Hello All,

Thanks a lot for this amazing library.

I am having an issue while using “CreatableSelect” with filterOption prop, which has ‘matchFrom’ value as ‘start’. The issue is that I am not able to create new options.

My Component usage looks like the following:-

const filterConfig = { matchFrom: 'start' }; <CreatableSelect isMulti isClearable={false} openMenuOnClick={false} value={value} options={options} filterOption={createFilter(filterConfig)} className={className} classNamePrefix={classNamePrefix} onChange={onChange} />

If I remove the filterOption prop, it works absolutely fine. Am I missing something here? Any help is greatly appreciated.

Thanks in advance.

[Rall3n]

You have to wrap the function created by createFilter into another function which checks if the option is the Create ... option.

const customFilter = createFilter({ matchFrom: 'start' });

/* ... */

<CreatableSelect
    { ... }
    filterOptions={(option, rawInput) => {
        // Data says its new so we return true.
        if (option.data.__isNew__) return true;
        
        // Filter using the filter function
        return customFilter(option, rawInput);
    }}
/>

CodeSandbox

[Anuj16]

@Rall3n I had raised a pull request to fix this in repository properly instead of having a workaround. That’s why kept this issue open. But looks like it’s going to take time. So closing this now. Would hope that the pull request gets merged sometime soon.