AsyncCreatable HOC

[bvaughn]

Resolves issue #1200.

Summary

Combining Async and Creatable HOCs turned out to be more tricky than I had initially expected. It is not sufficient to simple nest one within the other. To this end, I propose a new AsyncCreatable HOC that neatly ties the other two together (keeping the complexity out of user-land).

In general, async and composition is an area that we should probably put a lot of thought into before version 2 ships (so as to avoid some of the hackiness in this PR). Maybe this is good enough for v1 though?

I've updated the example site so that the Github users (Async) demo has a "creatable?" checkbox that can be used to test the Async + Creatable combination.

Syntax

import React from 'react';
import { AsyncCreatable } from 'react-select';

function render (props) {
  return (
    <AsyncCreatable {...props} />
  );
}

Demo

[coveralls]

Coverage decreased (-0.9%) to 91.334% when pulling 3ae25c3 on 1200-continued into f723189 on master.

[bvaughn]

Pfft. Coveralls is soooo pessimistic. 😜

[coveralls]

Coverage decreased (-0.2%) to 92.033% when pulling 79ffa35 on 1200-continued into f723189 on master.

[traumatic]

AsyncCreateable works great for me. Maybe it would be worth implementing "Home/Pos1" and "End" keys. Great work Brian!

[bvaughn]

@traumatic Thanks for giving it a spin!

Maybe it would be worth implementing "Home/Pos1" and "End" keys. Great work Brian!

This seems unrelated to this HOC, or am I misunderstanding?

[traumatic]

Sorry @bvaughn! Stupid me, the focus is on the dropbox list one I start typing. All good.

[bvaughn]

No problem at all. Just wanted to clarify. 😄

[coveralls]

Coverage decreased (-0.2%) to 92.033% when pulling feb70e4 on 1200-continued into f723189 on master.

[coveralls]

Coverage decreased (-0.2%) to 92.033% when pulling 3a5c5ed on 1200-continued into f723189 on master.

[bvaughn]

@JedWatson: I feel good about this PR after smoke testing it for a while. (@traumatic also smoke tested it.) I'm going to move forward with it since it cleans up the slightly awkward state PR #1200 left master in. Let's chat on Twitter if you have any concerns or remaining suggestions. 😄

[stinoga]

@bvaughn FYI, I've been testing this with our react select implementation all morning, and haven't found any issues. Both the areas updated to use AsyncCreatable and our other react select components are working great.

[bvaughn]

Thanks for the update @stinoga! That's great to hear. 😁

[rudeayelo]

Seems like this one was merged but it wasn't built before the release, so it's in the /src but not in /dist, therefore not published to npm 😭

[bvaughn]

It's more recent than RC1. It should go out with RC2. 😄

[rudeayelo]

Ups, sorry, my bad 😓

[deepakbansal1010]

Hey @bvaughn Any tentative timeline for RC2 release?

[bvaughn]

No. I reached out to Jed about it on Twitter. If he's okay with us making another RC, I think it would be good to. However I don't think I have permissions to publish the release to Npm myself. Will see.

[ansonkao]

Wow looks like I'm the first person to try using AsyncCreatable before it's been published. What are the chances!

+1 for this!

[bvaughn]

We talked. Looks like RC2 will land this weekend. I'm trying to finish a refactor of Async to fix a few issues first. If I'm not able to finish it in time we'll release without it.

[deepakbansal1010]

Hey @bvaughn
I'm using react-select component in one of my angular app with ECMA 5 syntax.
Everything was working fine until I introduced AsyncCreatable component.
In my app there are multiple react-select component used in a modal window. When I come to the modal window for the first time, the options populated are correct for all the multi select.
However when I save the details and open the same modal window again for adding one more records, the all multi select options are messed up and get populated with random values.

[bvaughn]

Sorry to hear you're having some troubles with the component, @deepakbansal1010. I'm afraid I don't have enough info to help based on your description though. You will likely have better luck if you include a link to a Plnkr (or similar) that reproduces the problem? You may also find faster responses on Stack Overflow since a lot more people check it than here. 😁

[MilllerTime]

@bvaughn Thanks for all the effort put into this component! 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.

Interestingly, I'm even observing this behavior with a simple identity function:

filterOptions={options => options}

Is there something to be aware of regarding this combination, or possibly an internal issue with AsyncCreatable preventing the use of a custom options filter?

If necessary, I can whip up a working demo to reproduce.

[bvaughn]

Is there something to be aware of regarding this combination, or possibly an internal issue with AsyncCreatable preventing the use of a custom options filter?

AsyncCreatable is very small so it's likely not an internal issue with it. At a glance, I would expect it to work as well as it works with Creatable. Sounds like a bug? File a GH issue if you think it is. 😄 Repros are always nice for GH issues.

[MilllerTime]

You're right, it looks like relatively simple composition. There's now a link to a plunker that demonstrates the bug in #1547

[bvaughn]

Hi 😄 If you haven't already, please file this as a GH issue. We're talking on a PR that was merged some time ago and so it's likely to get overlooked.

[MilllerTime]

Hey, totally agree. I wanted to connect this to the GH issue since I started the discussion here. So that was a link to the issue, not just the plunker. Sorry for any confusion 🙂

[bvaughn]

Oh, OK. Great!

…

On Feb 13, 2017 8:19 AM, "Caleb Miller" ***@***.***> wrote: Hey, totally agree. I wanted to connect this to the GH issue since I started the discussion here. So that was a link to the issue, not just the plunker. Sorry for any confusion 🙂 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1210 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABznQF8LqG5hvxTy4rvReBtTivmSDreks5rcIKegaJpZM4J6Xm4> .

[sarathantony]

@bvaughn : hello, i'm new to this. i tried, but couldn't be able to implement this. i'm struck in this more than 3 days. please help me out. i'm using it in an atomic design env. it's okey, i can handle that. my requirement is async+creatable+multi please help me out with useage of { AsyncCreatable } (can it really meet my requirements?)with all necessary props.