Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

RFC: Replace downshift by react-select #2135

Merged
merged 1 commit into from Jul 29, 2019

Conversation

@Betree
Copy link
Member

commented Jun 19, 2019

RFC - Replace downshift by react-select

Affected projects

  • Frontend

Motivations

  • Don't reinvent the wheel

A lot of the code in StyledSelect is dedicated to re-creating a full select behaviour. For example we catch the keyboard events to navigate between items. This is time consuming to maintain and error prone.

  • Improve accessibility

Whatever we do, we'll never be able to reach the level of accessibility of the native select or the one of a library with hundreds of testers and contributors.

Someone actually complained about our select component on Twitter (see StyledSelect accessibility · Issue #2056 · opencollective/opencollective · GitHub)

  • Add rich features to our existing selects

By using a library to handle our selects, we can benefit from other rich features that they may implement. See Solution for more details.

Solution

I've used react-select in the past. It's a mature library (it went through major re-designs for v2 and V3) that is actually the more popular select library for react (almost 17.000 stars on Github). It uses the same patterns than styled-component for customization, so we'll be able to implement our design system easily.

In addition to everything you could expect from a select, it has the following features:

  • Searchable

Useful to easily pick items from long lists (ex: for our countries select)

See React-Select

  • Asynchronously fetch for options

Could be usefull if we want to implement an autocomplete select to pick a collective. We had this use case for "archive collective", to transfer the remaining funds to another collective.

See React-Select - Async

  • Creatable

This mode is made for things like tags input. It combines autocomplete / select with the ability to add new items.

See React-Select - Creatable

Impact on bundle size

Once this change is made, we can remove:

  • react-tag-input - 11.6kB (+ additional CSS included)
  • downshift - 7.1kb
  • All our internal code to deal with keystrokes, options building...etc

react-select is 26.1kb (less if we don't use Async fetch) so it could add up to 8kb to our bundle size once we made all the changes.

Alternatives

Proof of concept

Can be added to this PR if requested.

Adoption / Transition strategy

We only use StyledSelect in 3 parts of the code so the migration should be easy.
A $100 bounty to migrate everything would be appropriate.

@Betree Betree requested review from xdamman, znarf, flickz and pietgeursen Jun 19, 2019

@pietgeursen
Copy link

left a comment

Thanks for the nice clear RFC.

I don't have enough context to be confident but it sounds like it would be a small change to the codebase with a number of benefits.

@znarf

znarf approved these changes Jul 17, 2019

Copy link
Member

left a comment

I'm up for it.

@flickz

flickz approved these changes Jul 17, 2019

@Betree Betree merged commit 9c7a02c into master Jul 29, 2019

@Betree Betree deleted the rfcs/replace-downshift-by-react-select branch Jul 29, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.