AsyncCreatable + filterOptions breaks create functionality
See original GitHub issueAsyncCreatable
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.
Issue Analytics
- State:
- Created 7 years ago
- Reactions:2
- Comments:19 (1 by maintainers)
@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 innerAsync
and the innerCreatable
then later reduced so that theAsync
props override theCreatable
props. This means thatCreatable
can’t hook into this process like it needs to.I think one fix would be similar to what we do with
onInputChanged
: