React Select v2 and the future

[JedWatson]

I've spent the last few months cleaning up react-select v1 and thinking about the future. Now I'm ready to share some exciting news, and begin discussing plans openly.

The project has grown way beyond my original use-case to become one of the most popular react components: with nearly a million downloads per month, statistically over one in seven people installing react-dom also install react-select 😆

Over the years the API has also grown organically to accommodate a huge amount of flexibility and customisation, and I've been reluctant to do much that would break it or invalidate open PRs before they can be reviewed.

On to the news: for the last half-year, with several team members from Thinkmill I've been working with Atlassian to develop their new UI library Atlaskit which is being used in Jira, Stride, Confluence, Bitbucket and many other products. We've had the opportunity to do a lot of deep thinking on component architecture, and are now turning our attention to Select components... which I am hoping to use react-select as the base for.

With that in mind, I'm embarking on a rewrite of the component using these new ideas and much more modern techniques. I've got a working prototype of the new architecture, and from now I'll be working publicly in a v2 branch. Here's what you need to know:

• v1.x is stable and will continue to be maintained, at least until v2 is released with feature parity
• The v2 branch is experimental; I'll update here as it evolves
• v2 will use css-in-js (my current prototype uses glam, this may change) and will continue to be themeable
• v2 won't include less/scss stylesheets. I've got some ideas on how to continue shipping a classNames-based API for everyone who's already invested in stylesheet customisations... we'll see
• I'm working on a new concept for customising the component which will consolidate a lot of the current props and make the component more modular, more maintainable while increasing flexibility
• Despite re-writing the architecture, much of the existing code will be brought forward; there is a huge amount of maturity in this project that I'm keen to protect

Some specifics:

• I'm using flow
• Internal state management has been cleaned up significantly - how options are handled and data is passed are both more powerful and more consistent
• You'll be able to override all the components to completely customise the UI
• Some functions will also be configurable when you want custom behaviour
• Accessibility, performance and flexibility are all first-class concerns

My goal is that many of the requirements people open issues and PRs for will become easily customisable so they don't require changes to the react-select core. If (if) I get this right, it'll both make the component more useful and also help me stay on top of things as a maintainer. It also opens the potential for an ecosystem of packages and customisations to start developing on top of react-select, instead of the many forks that currently exist.

[webmobiles]

sorry have not read your message before, i've just add a new request future, it's about to allow type values that are not on the list ? by example i need add cities that are not on the list or some lists are not really from a database (have no id) but the important thing it's capture the text, not the id value or key. I don't know if that is planned in V2 , or there is a way I can change the code to be able to use in v1 ?
thanks for your nice component.

[JedWatson]

I've just pushed the first working implementation into the v2 branch for anyone who's interested in checking it out at this early stage.

[hongbo-miao]

Thanks @JedWatson ! And congratulations for reaching 10000 stars!

[iwollmann]

@JedWatson v2 will support async load with pagination?
Nice job man, thanks!

[JedWatson]

I've opened a PR for v2, the preview is available here: https://deploy-preview-2289--react-select.netlify.com/

@webmobiles and @iwollmann I'm not 100% sure on which features will be in v2 yet, but I'm taking into account all of the requests that have come in over the last year including things that we haven't managed to do (or do well) in v1 and am hoping most of them will be supported in the new version.

I'll continue to provide more details on changes and new features as development progresses.

[shulcsm]

It looks like it has optgroup support? 👍
Is there a roadmap and timeline for stabilization?

[JedWatson]

v2 will support async load with pagination?

I am planning it, although haven't finalised that part of the API yet (Async is super simple right now, just expects an array of options to the callback - I'll need to extend this)

It looks like it has optgroup support?

Sure does, implemented from the get-go 😁

Is there a roadmap and timeline for stabilization?

I wrote up a brief to-do list on the PR: #2289

Luckily @jossmac and I've got quite a bit of time to work on this at the moment and I'm hoping to get it shipped before the end of February.

Really happy for reviews + feedback at the moment, but I wouldn't want anyone using it in production before the actual 2.0.0 release (not alpha) because it's still going to go through a few breaking changes as we round out the functionality and work out the kinks with the new architecture + API.

[chrisforrette]

@JedWatson Do you need any help with v2? I'd love to contribute if there's any low-hanging fruit you can point me at that might be a good starting point.

[Reaverart]

Thank you for a great lib! If it is possible, please include portal functionality for a dropdown to render it inside of overflow: hidden container. There is about 10 issues about it and sadly but dont see any good way to solve it, so if it possible to add it - it would be cool.

[a-type]

@Reaverart @JedWatson I have the same request - this library is great, except that the popover section of the Select gets eaten up by components with overflow settings.

I get that since all components are replaceable, we could do this ourselves (great feature by the way, I love seeing that in React component libs). But it seems like a lot of users will want this out of the box.

If I can find the time I'll submit a PR targeting v2 branch, would that work for you?

[jossmac]

@Reaverart @a-type we're not sure yet whether to ship a portal with the menu, but I'd like to address this common concern. Below is an example using the v2 API:

import React, { Component } from 'react';
import Select, { components } from 'react-select';
import { createPortal } from 'react-dom';

const Menu = props => createPortal(
  <components.Menu {...props} />,
  document.body
);

class MySelect extends Component {
  render() {
    <Select components={{ Menu }} />
  }
}

CC: @doronbrikman, @rahulraghavankklm, @mcorteel

[a-type]

@jossmac have you tested that? My understanding of the rendering parameters for the menu indicates that it wouldn't appear in the correct position if it's simply rendered into document.body.

I have an issue open here proposing the feature: #2398

And I have a branch with working changes on my fork: https://github.com/a-type/react-select/tree/v2-portal-menu

Still awaiting discussion or approval of the direction before finishing it all up and submitting a PR.

[jossmac]

@a-type yeah, you'd have to position the menu.

I'll have to checkout your branch in more detail, thanks for putting together the issue for discussion 👍

[franklixuefei]

@JedWatson @jossmac Will V2 also include typescript definitions?

[JedWatson]

@frankievx I'm not keen on maintaining two type definitions, at least not yet. If there's enough demand in the community and someone wants to step up to maintain it, I might be open to it down the track, but right now it would be a burden on our core development and/or get out of date (both of which would be bad)

I know this could be disappointing for typescript users and that's a shame, I do wish there was an easy way to maintain both... but at this point I'm optimising for maintainability.

[shulcsm]

I'm playing around with alpha6/7, great progress. I'm trying to replicate what simpleValue did in v1 but that seems impossible?
https://github.com/JedWatson/react-select/blob/v2.0.0-alpha.7/src/utils.js#L50

[kpavankotesh]

I'm using v2.0.0-alpha.7 to customise my SelectInput.

I am able to add custom styling except those styles that depend on the state. For example

  option: base => ({
    ...base,

    color: isSelected ? '#fff' : '#000',
  })

How do I get the isSelected value here in the styles? I would want to style my selected option and other options differently.

@JedWatson Will these values be available to provide custom styling?

[falconmick]

@JedWatson I'm having a super hard time building the project so I can test it locally. I'm running:

yarn build
yarn link

go into my project

yarn link react-select

First time I did this, my build uses the "main" defined in package.json which resolves to the lib folder and I get the following error:

Module build failed: ReferenceError: Unknown plugin "transform-decorators-legacy" specified in "base" at 0, attempted to resolve relative to "/Users/falconmick/dev/react-select/lib"

So I go and I move that main to instead point at build/react-select.js, but then I get this error (also happens when I copy the build locally):

ReferenceError: createFilter is not defined

Finally I try build/react-select.es.js

SyntaxError: Unexpected token import

How exactly can I build and test this locally via yarn link. This is really painful to work with.

Edit:
Perhapse a guide into how you do local development? However the ability to easily test new fixes into my product's private repo would rock as I don't think your demo is SSR and unfortunately at this time I don't have the man hours to look into making the demo stuff SSR. Even a demo on how you compile the package would rock as I think that the commands I am running are wrong. You have Travis in this project to run tests, perhapse you could add a flow (never used travis, but most CI products I've used have the idea of flows, so you could have PR flow which just runs tests and npm flow which runs tests and builds the npm package and deploys) as that way a new dev could look into the travis config and see how the product is built

[JedWatson]

@falconmick that's a pretty hard question to answer blind, I'll do my best. I've had react-select working in linked mode without any issues, but haven't tested in the last couple of weeks so something may have changed 😬

I'm not sure why the problem with "transform-decorators-legacy" is popping up, that's nowhere to be found in the codebase... it's possible you may need to ensure you're ignoring node_modules in your babel config, that can cause problems.

I just found and pushed a fix (to the v2 branch) where createFilter and other things weren't being exported properly in index.umd.js, not sure why that would have caused a problem with index.es.js though because that's using the index.js entry point.

In terms of how best to dev ssr in react-select, actually maybe the easiest way would be to add a really simple SSR script to the react-select repo and include it in the test suite. So maybe yarn ssr would write a server-side rendered html page with react-select in it to the console, or something.

That might help with your dev loop, and also make sure that issues with SSR don't creep in with PR's going forward.

re: how I build, I'll add that to the readme, it's roughly this:

• yarn start --> starts the local dev server in watch mode, no builds are written to disk
• yarn build --> generates the build
• yarn watch --> generates the build and watches for changes, probably what you want when running with yarn link
• yarn test --> run the local test suite, this and the lint task are run in CI

EDIT I mis-read your comment and just realised that my last push should have fixed the issue blocking you when you change the main entry point to dist//react-select.js. You're not able to use the react-select.es.js with node because it doesn't support ES Modules yet.

[JedWatson]

re @kpavankotesh those functions take a second argument which is the props passed to the component being styled. This would work:

 option: (base, { isSelected }) => ({
    ...base,
    color: isSelected ? '#fff' : '#000',
  })

We've done a lot of work on the docs in the last couple of weeks, check them out and let me know if it's still confusing.

For everyone else, please open new issues with bug reports or feedback on v2, they're easier to see and respond to than comments on this issue 🙂

[kpavankotesh]

Saw the latest release and examples. This feature is available now. Thanks 👍

[falconmick]

@JedWatson the issue of transform-decorators-legacy still exists when I attempt to use yarn link however if I copy/paste the built file inside dist to my project I no longer get ReferenceError: createFilter is not defined so it mightn't be the fastest workflow, but as you will see I have been able to complete my initial PR

[tommyalvarez]

@JedWatson i don't know if this is the issue to acummulate all v2 issues but here it goes:

When adding Animated component to AsyncSelect i'm getting the following two warnings, ONLY when using isSearchable false:

Warning: Received `true` for a non-boolean attribute `in`.

If you want to write it to the DOM, pass a string instead: in="true" or in={value.toString()}.
    in input (created by Unknown)
    in Unknown (created by Unknown)
    in Unknown (created by Select)
    in div (created by Unknown)
    in Unknown (created by ValueContainer)
    in ValueContainer (created by TransitionGroup)
    in TransitionGroup (created by AnimatedValueContainer)
    in AnimatedValueContainer (created by Select)

Warning: Unknown event handler property `onExited`. It will be ignored.
    in input (created by Unknown)
    in Unknown (created by Unknown)
    in Unknown (created by Select)
    in div (created by Unknown)
    in Unknown (created by ValueContainer)
    in ValueContainer (created by TransitionGroup)
    in TransitionGroup (created by AnimatedValueContainer)
    in AnimatedValueContainer (created by Select)

Hope it helps, it's definetely some combination of isSearchable false with Animated. This is my component:

<AsyncSelect {...this.props}
          cacheOptions
          components={Animated}
          defaultOptions
          isMulti
          isSearchable={false}
          loadOptions={this.props.fetchOptions}
          loadingMessage={() => I18n.t('select2.loading-placeholder')}
          noOptionsMessage={() => I18n.t('select2.no-results')}
          onChange={this.handleInputChange}
          styles={selectStylesSelectMultiple(error)}
          value={this.getValue(this.props)}
        />

[jfsiii]

@tommyalvarez from @JedWatson in #2208 (comment)

please open new issues with bug reports or feedback on v2, they're easier to see and respond to than comments on this issue 🙂

[tommyalvarez]

@jfsiii oops, didn't see that. However what does he mean by reporting on v2? Is that a particular PR or something? Could you please provide a link ? Because i know it's not another repository, and in the official v2 doc page there's nothing there. Thanks!

[jfsiii]

@tommyalvarez create an issue at https://github.com/JedWatson/react-select/issues/new like you would any other, just be sure to mention that the issue is with v2 code

[Harini03]

@JedWatson , Can we use React-Select v2 Beta for production? Also when can we expect the v2 main release?

[falconmick]

Test it on all browsers you have to support and then make sure your targeting the exact version of the beta (no ^2.0.0-beta stuff) and then just accept that your responsible to ensure that it keeps working. By locking the version and testing it fully it’s as ready as your tests were extensive. This is general advice on betas, this beta might be allot more stable than I’m being paranoid

…

On Sat, 23 Jun 2018 at 10:39 AM, Harini03 ***@***.***> wrote: @JedWatson <https://github.com/JedWatson> , Can we use React-Select v2 Beta for production? Also when can we expect the v2 main release? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2208 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAri6f7plwJd2Hf0YXXg5klAFd5AIHe-ks5t_apYgaJpZM4Q-cW0> .

[jossmac]

Comment from @dbertella on #2289

Dunno if it's the right space to discuss, but I'm wondering why did you go for a new prop isDisabled instead of sticking to standard disabled. This will be a little pain for the migration.

Another thing is the value prop, is it working different than v1? It's not really clear what's going on in the documentation since it says unchanged, I think the way it's working in v1 was that it was containing just the value, right now it needs to have to whole { label, value } object am I right?

value

The value property has remained the same; it's likely that you were using simpleValue, which allows a string value (this is no longer supported). More info in the v1 docs.

isDisabled

Partly for consistency with other props/state, but mainly to be more explicit -- isDisabled is used in many other places than the DOM node where it's passed in as disabled.

[garylirocks]

@JedWatson @jossmac hi guys, v2 is cool ! when can we expect v2 out of beta, we may use it in production ?

[testacode]

Could it support visual error handling?

Like

I know it's an input, but something alike.

[tommyalvarez]

@testacode you can do that manually like:

<AsyncSelect {...rest}
          cacheOptions
          components={Animated}
          defaultOptions
          loadOptions={debounce(this.props.fetchOptions, 700)}
          loadingMessage={() => I18n.t('select2.loading-placeholder')}
          noOptionsMessage={() => I18n.t('select2.no-results')}
          onChange={onChange}
          styles={selectStylesSelect(error, height)}
          value={this.getValue(this.props)}
        />
        {error && <span className='error-block'>{error}</span>}

See the selectStylesSelect ? That's a function that receives the error as a flag and returns the select-v2 style object, customized. Then comes the error hint.

[manongguard]

when will onBlurResetsInput props be supported too? looking forward for V2

[JedWatson]

Very happy to announce that v2.0.0 has just been published to npm, and we have a new site: react-select.com

Thanks to @gwyneplaine, @Noviny and everyone else who helped with this release.

We'll follow up the rest of the feedback separately in individual issues. Hope you all like it!

[y13uc130]

I'm using v2.0.0-alpha.7 to customise my SelectInput.

I am able to add custom styling except those styles that depend on the state. For example

  option: base => ({
    ...base,

    color: isSelected ? '#fff' : '#000',
  })

How do I get the isSelected value here in the styles? I would want to style my selected option and other options differently.

@JedWatson Will these values be available to provide custom styling?

You can do something like:

option: (base, state) => ({
        ...base,
        color: state.isSelected ? "#fff" : "#000"
    }),