AsyncCreatable + filterOptions breaks create functionality

AsyncCreatable is working well, until I add a custom filterOptions prop. At that point async lookup still works, however the creatable behavior disappears - there is no longer an option to add an unrecognized value.

The custom filter I’m using works as expected with both the Creatable hoc and the base Select component. The issue is only with AsyncCreatable. My filter is just removing options a user previously selected, but which react-select is no longer aware of.

The issue manifests even with a simple filter function that just returns the options unmodified. Here’s a plunker to demonstrate:

https://plnkr.co/edit/KWDD9e2OexIHMiej6ZK2?p=preview

Turns out using an identity function as a filter for a standard Creatable select adds a new “Create option” option on each keystroke - maybe that points to another bug? 😄 While slightly annoying, the main issue described is still observable with the last AsyncCreatable - nothing can be created.

[oomathias]

@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

[bvaughn]

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}