React Select v2 #2289

JedWatson · 2018-01-12T05:18:47Z

Updated: See the preview here: http://bit.ly/react-select-v2

v2 issue for discussion: #2208

View the v2 source: https://github.com/JedWatson/react-select/tree/v2

Alpha releases of react-select@2.0.0 are available on npm for preview, and I have opened this PR to help increase visibility of the current state, ci status and netlify preview.

v2 should still be considered experimental, but it's at a point where I would absolutely welcome feedback on the architecture and approach. More examples and documentation coming soon.

PRs and issues specific to the new version should be tagged v2

JedWatson · 2018-01-25T06:22:46Z

I just published react-select@2.0.0-alpha.2 to npm, this is getting pretty close to a viable implementation. The examples have been updated (see preview link above) and I'd love some feedback on the new architecture.

v2 significantly improves on v1 in several areas:

Uses css-in-js with a complete styling API
Allows you to completely replace any of the built-in rendering components
Is simpler and more extensible (many props will become redundant)
More performant

Major work to do before v2 hits feature parity with v1 includes:

Form integration (hidden inputs)
More robust filtering functionality
Async options with Promises (currently supports callbacks)
Ability to customise built-in strings
Creatable (tags) mode
Virtualisation support

It also needs complete documentation and an upgrade guide with changes from v1.x, as well as a lot of tests (and user testing). In the meantime, if you're interested read the example source to see how the new API works.

JedWatson · 2018-02-02T14:15:56Z

Quick update: I published v2.0.0-alpha.3 today and have written up a more comprehensive to-do list here

Getting closer!

Zertz · 2018-02-02T18:20:35Z

Amazing work! We're starting a new project using v2, looking great so far 💯

Only thing so far is that I can't seem to get the loadOptions to work with a Promise but the callback method works just fine.

albertogasparin

Added few suggestions, nothing mayor found yet.

albertogasparin · 2018-02-03T18:53:18Z

src/Async.js

+  componentDidMount() {
+    this.mounted = true;
+    const { defaultOptions } = this.props;
+    if (defaultOptions === true) {


I found this defaultOptions behavior a bit weird. I was expecting it to be falsy or an array, not loading options on mount if true. I know you are saving a prop but I'm wondering if using a dedicated one as in v1 makes the behavior more predictable

I think you're right, it does seem a bit less predictable this way. Happy to add another prop.

albertogasparin · 2018-02-03T18:59:17Z

src/Async.js

+        () => {
+          this.loadOptions(inputValue, options => {
+            if (!this.mounted) return;
+            if (options) {


What abut checking also cacheOptions? If it is false then it can skip caching the response altogether

Yeah that seems like a good thing to do

albertogasparin · 2018-02-03T19:32:27Z

src/Select.js

+      };
+    };
+
+    options.forEach((item, itemIndex) => {


Instead of forEach I would use reduce, so render is no longer a side effect but it is the result of the loop

@albertogasparin would you be interested in creating a PR for that?

Sure. Here is my take #2359

albertogasparin · 2018-02-03T20:57:42Z

package.json

-    "classnames": "^2.2.4",
-    "prop-types": "^15.5.8",
-    "react-input-autosize": "^2.1.2"
+    "classnames": "^2.2.5",


Is this still required? Cannot see it being used

albertogasparin · 2018-02-03T21:27:23Z

.TODO.md

+
+* [ ] Prevent values from being popped, was `option.clearableValue === false`
+* [ ] Scroll behaviour: should we detect parent? how do we handle the footer?
+* [ ] Scroll behaviour: can we overscroll up to show the group heading?


Another one is: can the user customize scrollIntoView? For instance, if the option group header has position: sticky then the scroll position should account for its height

Yeah, we should also do some work around handling more complex requirements for rendering the menu (e.g into a Portal)

albertogasparin · 2018-02-03T21:38:48Z

src/components/Input.js

+  fontSize: 'inherit',
+  opacity: isHidden ? 0 : 1,
+  outline: 0,
+  padding: 0,


Input might need padding/margin/explicit height when isMulti, as when on a new line on its own is a bit small:

@jossmac can you take a look at this?

@JedWatson sure thing, I'll check it out tomorrow.

@albertogasparin @JedWatson resolved in 07bba99 of #2354

JedWatson · 2018-02-05T22:54:05Z

@Zertz great to hear! I've just implemented Promise support in Async, it'll be available in the upcoming alpha.4 release

@albertogasparin thanks for the review 👌 some good points in there. I'm currently working on a pretty big cleanup (see #2351) and will work through your feedback as soon as I land that.

Zertz · 2018-02-28T13:35:44Z

Fantastic work @JedWatson ! We're releasing alpha.6 in production soon :)

shulcsm · 2018-03-12T11:15:42Z

Could you release an alpha, it's been a while.

barbu110 · 2018-04-06T20:37:46Z

What about TypeScript typings?

BTW This is an amazing project!

JedWatson · 2018-04-10T06:50:20Z

Heads up everyone who's watching this thread - alpha.9 was just released, and we'll be moving into beta shortly (at which point this will be merged into master)

@barbu110

What about TypeScript typings

I'll consider that after the final release of 2.0.0, I know they're helpful but I'm reluctant to introduce anything that needs to be kept in sync after the experience of maintaining both less and scss in v1.x, where only less was actually used by the examples and build. I'm not sure what's worse between no types, and out of sync types.

bcalik · 2018-04-19T04:24:47Z

Thanks for the great effort @JedWatson !! v2 looks really promising. I can't wait to use it on my next project.

falconmick · 2018-04-20T10:30:15Z

Universal/SSR is broken due to https://github.com/JedWatson/react-select/blob/v2/src/utils.js line 206

I am pulling down locally and working on a patch, will submit PR as soon as I've got SSR working

JedWatson · 2018-04-20T14:15:35Z

Great news - React Select 2.0.0-beta.1 is out 🎉

At this point, I think the rewrite is basically complete and don't expect much to change before general release of 2.0. So, I need help making sure it's ready 😃

I'd like to keep it in beta for a couple of weeks, so there's time to get feedback and make sure the upgrade guide / docs are ready before we merge it into master, but all the features I'm planning for 2.0.0 are ready and it's well tested.

Thanks for picking up SSR @falconmick, if anyone else finds issues during beta please open an issue (or even better, PR) with the prefix [v2] in the title.

Export indicator icons for use in customizations

falconmick · 2018-04-21T06:22:34Z

I’ll not be able to get onto the issue until late Sunday or early Monday (Aussie time)

Added `closeMenuOnScroll` prop

v2 readme

remove deprecation warning and backward compatibility logic

…act-types

[V2] Default filterOption prop in Async component instead of passing null

…rops object

…ts and innerRef/innerProps

V2 update issue template

V2 redistribute inner ref

Prefer more descriptive esm word instead of es

update contributing md

update changelog in prep for v2.0.0 release

JedWatson · 2018-07-23T09:57:03Z

OMFG 🎉

JedWatson added the v2 label Jan 12, 2018

This was referenced Jan 25, 2018

React Select v2 and the future #2208

Closed

optgroups #59

Closed

JedWatson changed the title ~~React Select v2 [do not merge]~~ React Select v2 [work in progress] Jan 31, 2018

JedWatson mentioned this pull request Jan 31, 2018

Categorized options feature #2335

Closed

albertogasparin reviewed Feb 4, 2018

View reviewed changes

ellamental mentioned this pull request Mar 6, 2018

How to get permission to create a PR? #2406

Closed

This was referenced Apr 14, 2018

Fix menu closing when click outside the menu box #2314

Merged

<div> can't be nested in <span> according to HTML spec #1128

Closed

JedWatson added 4 commits April 20, 2018 17:23

v2.0.0-beta.1

92f1037

Minor website tweaks

77aa268

Adding yarn.lock for netlify

c957801

Updating yarn.lock

a54fbba

Export indicator icons for use in customizations

6946eea

JedWatson added 4 commits April 21, 2018 00:39

Updating travis script

eef3ac1

Merge pull request #2535 from jesstelford/patch-1

64ef10c

Export indicator icons for use in customizations

Tweaking header on website

e9872f7

Fixing a warning in the docs website

5e91e18

gwyneplaine and others added 25 commits July 23, 2018 15:22

update snapshots

033cba7

Merge pull request #2809 from Vynlar/v2

8aebc03

Added `closeMenuOnScroll` prop

Merge pull request #2818 from JedWatson/v2-readme

97d2760

v2 readme

Merge pull request #2820 from JedWatson/v2-remove-dep-warn

08ef385

remove deprecation warning and backward compatibility logic

remove invocation of null in defaultOptions to account for extract-re…

5f21735

…act-types

Merge pull request #2822 from JedWatson/v2-default-async-filters

4967ba1

[V2] Default filterOption prop in Async component instead of passing null

change menuList to declare innerRef instead of nest it within innerProps

c3d2e8a

Control now declares innerRef outside of innerProps object

75707e7

update innerRef of Option component to be independent of innerProps p…

cb15dbc

…rops object

update snapshots

f36fed2

update upgradeGuide with up to date information circa custom componen…

7a3c5c4

…ts and innerRef/innerProps

update reference to plunkr to reference codesandbox in stead

f3e3932

move ISSUE_TEMPLATE to .github/ISSUE_TEMPLATE

37b83fd

Removing unused Travis config

20ceabc

Merge pull request #2825 from JedWatson/v2-update-issue-template

4cd69d5

V2 update issue template

Merge pull request #2824 from JedWatson/v2-redistribute-innerRef

cc095f8

V2 redistribute inner ref

update contributing md

111f513

Merge pull request #2641 from TrySound/es-to-esm

7567283

Prefer more descriptive esm word instead of es

Merge pull request #2826 from JedWatson/v2-update-contributing.md

5ac6876

update contributing md

update changelog in prep for v2.0.0 release

aa22e49

Merge pull request #2828 from JedWatson/v2-release-changelog

562c02b

update changelog in prep for v2.0.0 release

Merge branch 'master' into v2

24f85f8

inlining react-fast-compare to get around rollup configuration issues

f85fe6d

Readme improvements for v2

b455622

Merge branch 'v2' of github.com:JedWatson/react-select into v2

8261f19

JedWatson changed the title ~~React Select v2 [work in progress]~~ React Select v2 Jul 23, 2018

JedWatson merged commit 2654ce0 into master Jul 23, 2018

This was referenced Jul 27, 2018

React-select : option multi renamed to isMulti DefinitelyTyped/DefinitelyTyped#27611

Closed

[v2] Typescript typings for v2? #2860

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

React Select v2 #2289

React Select v2 #2289

JedWatson commented Jan 12, 2018 •

edited

Loading

JedWatson commented Jan 25, 2018 •

edited

Loading

JedWatson commented Feb 2, 2018

Zertz commented Feb 2, 2018

albertogasparin left a comment

albertogasparin Feb 3, 2018

JedWatson Feb 6, 2018

albertogasparin Feb 3, 2018

JedWatson Feb 6, 2018

albertogasparin Feb 3, 2018

JedWatson Feb 6, 2018

albertogasparin Feb 8, 2018

albertogasparin Feb 3, 2018

albertogasparin Feb 3, 2018

JedWatson Feb 6, 2018

albertogasparin Feb 3, 2018

JedWatson Feb 6, 2018

jossmac Feb 7, 2018

jossmac Feb 8, 2018

JedWatson commented Feb 5, 2018

Zertz commented Feb 28, 2018

shulcsm commented Mar 12, 2018

barbu110 commented Apr 6, 2018

JedWatson commented Apr 10, 2018

bcalik commented Apr 19, 2018

falconmick commented Apr 20, 2018

JedWatson commented Apr 20, 2018

falconmick commented Apr 21, 2018

JedWatson commented Jul 23, 2018 •

edited

Loading

React Select v2 #2289

React Select v2 #2289

Conversation

JedWatson commented Jan 12, 2018 • edited Loading

JedWatson commented Jan 25, 2018 • edited Loading

JedWatson commented Feb 2, 2018

Zertz commented Feb 2, 2018

albertogasparin left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

JedWatson commented Feb 5, 2018

Zertz commented Feb 28, 2018

shulcsm commented Mar 12, 2018

barbu110 commented Apr 6, 2018

JedWatson commented Apr 10, 2018

bcalik commented Apr 19, 2018

falconmick commented Apr 20, 2018

JedWatson commented Apr 20, 2018

falconmick commented Apr 21, 2018

JedWatson commented Jul 23, 2018 • edited Loading

JedWatson commented Jan 12, 2018 •

edited

Loading

JedWatson commented Jan 25, 2018 •

edited

Loading

JedWatson commented Jul 23, 2018 •

edited

Loading