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

Updating react-select to 1.0.0-rc #4189

Merged
merged 16 commits into from Oct 2, 2017
Merged

Updating react-select to 1.0.0-rc #4189

merged 16 commits into from Oct 2, 2017

Conversation

@edmundoa
Copy link
Member

@edmundoa edmundoa commented Sep 28, 2017

While our react-select version was still working, since we updated to React 15, we were getting warnings on npm install and while using select elements, as react-select didn't support that React version.

This PR updates react-select to its latest version (1.0.0-rc.10), trying to minimize the amount of changes by encapsulating them into our Select component. These are some of the changes done here:

  • Adapt to changes in onChange. React-select returned a string with the value of the selected options or a string with all values separated by a delimiter. Now it returns the option object that was selected, or an array of objects if it was a multi select
  • Due to a non-optimal design of our own Select component (which was and is using react-select underneath), many components were relying on react-select's onChange directly, instead of using the internal and preferred onValueChange callback. To avoid further changes and confusion, here we deprecate onValueChange and use onChange internally, allowing us to keep the old API and hide the new behaviour inside the Select component. Although using onValueChange will still work, I have replaced all our usages both here and in plugins (I'll open PRs shortly)
  • Fix custom styling when we want to render a smaller version of the Select element
  • Remove some TODOs, as react-select now supports autoFocus and required
  • Fixed multi selects that allow users to create their own values. React-select changes quite a bit in that area, and now we need to: use a Creatable component to enable that behaviour; format the values to ensure they are displayed

You can see a (mostly) full list of changes in react-select in: https://github.com/JedWatson/react-select/blob/v1.0.0-rc.10/HISTORY.md

I opened this PR against master and added 2.4.0 as milestone, as this should also be merged into 2.4.

edmundoa added 16 commits Sep 27, 2017
Before react-select passed the object's value, now it passes the whole
object.
Do not pass options not being accepted by the ReactSelect component,
letting the prop check to itself.
The purpose of that prop was to offer some internal API we could rely
on, but there were many accidental usages of `onChange`, which was going
directly to react-select.

In this commit we are deprecating `onValueChange` and start using `onChange`
instead. This allows us to keep the old API, fix code that was directly
using react-select's callback, and avoid accidental pass of props to the
encapsulated component.

It is still possible to get a direct callback from react-select by using
the `onReactSelectChange` prop.
This allows us to encapsulate all related react-select changes in the
Select component.
Selected items go into a different component, so there's no need to
clear the select input.
This was previously possible by using the `allowCreate` prop, and it
suffered many changes in react-select:

- Now we can get that functionality by using react-select's `Creatable`
component

- In order to display the newly added options, react-select requires
that created values have the same format as options. This requires some
formatting in our side, as our Select component returns and accepts
string values
@bernd
bernd approved these changes Oct 2, 2017
Copy link
Member

@bernd bernd left a comment

LGTM 👍

@bernd bernd merged commit 3cfb581 into master Oct 2, 2017
5 checks passed
5 checks passed
ci-web-linter Jenkins build graylog-pr-linter-check 1951 has succeeded
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details
continuous-integration/travis-ci/push The Travis CI build passed
Details
graylog-project/pr Jenkins build graylog-project-pr-snapshot 512 has succeeded
Details
license/cla Contributor License Agreement is signed.
Details
@bernd bernd deleted the update-react-select branch Oct 2, 2017
bernd added a commit that referenced this pull request Oct 2, 2017
* Update react-select css path

* Adapt onChange callback to changes in react-select

Before react-select passed the object's value, now it passes the whole
object.

* Filter options passed to react-select

Do not pass options not being accepted by the ReactSelect component,
letting the prop check to itself.

* Deprecate `onValueChange` prop on Select component

The purpose of that prop was to offer some internal API we could rely
on, but there were many accidental usages of `onChange`, which was going
directly to react-select.

In this commit we are deprecating `onValueChange` and start using `onChange`
instead. This allows us to keep the old API, fix code that was directly
using react-select's callback, and avoid accidental pass of props to the
encapsulated component.

It is still possible to get a direct callback from react-select by using
the `onReactSelectChange` prop.

* Also filter `value` prop from react-select

* Use function ref in Select component

* Fix select sm styling

* Fix case when user clears select input

* Update react select to 1.0.0-rc.10

* Adapt Select onChange callback on multi selects

This allows us to encapsulate all related react-select changes in the
Select component.

* Migrate Select's onValueChange props to onChange

* Add now supported autoFocus and required props

* Replace deprecated string ref

* SelectableList should not be clearable

Selected items go into a different component, so there's no need to
clear the select input.

* Support creating options from Select component

This was previously possible by using the `allowCreate` prop, and it
suffered many changes in react-select:

- Now we can get that functionality by using react-select's `Creatable`
component

- In order to display the newly added options, react-select requires
that created values have the same format as options. This requires some
formatting in our side, as our Select component returns and accepts
string values

* Pass string value to Select component

(cherry picked from commit 3cfb581)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

2 participants
You can’t perform that action at this time.