react-select: AsyncCreatable + filterOptions breaks create functionality

@bvaughn Oh sorry, I didn’t blame the file… Yup, it has been reversed later.

Yeah, I came out with the same fix, unfortunately, it’s not enough.

@unity The change was made here https://github.com/JedWatson/react-select/pull/1374 Why did you reverse the props override asyncProps <==> creatableProps? Also, reduce seems to do nothing more.

Fix

I updated the demo with the proposed fix, but it’s just a first step, look at my GIF. https://embed.plnkr.co/ik8qaDyOUsa1usQQktaE/

Filtered filterOptions={(i) => i}

Not filtered no filterOptions

Hm. I’m not sure why the order of override properties were reversed since I first created that component.

Anyway, I see. The user’s filterOptions function is passed to both the inner Async and the inner Creatable then later reduced so that the Async props override the Creatable props. This means that Creatable can’t hook into this process like it needs to.

I think one fix would be similar to what we do with onInputChanged:

              <Select
                {...asyncProps}
                {...creatableProps}
                filterOptions={creatableProps.filterOptions}

I know this is old, but I am using Select.AsyncCreatable and have the issue @oomathias showed in the gif where “create new” duplicates over an over. I fixed it by passing the following function to the filterOptions on Select.AsyncCreatable and everything works. I’m sure there are better ways but it works for me.

let filterOptions = options => { options = options.filter(o => !/Create option/i.test(o.value)); return options; }