Updating react-select to 1.0.0-rc #4189
Merged
Conversation
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
This was referenced Sep 28, 2017
|
LGTM |
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
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
While our react-select version was still working, since we updated to React 15, we were getting warnings on
npm installand 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
Selectcomponent. These are some of the changes done here: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 selectSelectcomponent (which was and is using react-select underneath), many components were relying on react-select'sonChangedirectly, instead of using the internal and preferredonValueChangecallback. To avoid further changes and confusion, here we deprecateonValueChangeand useonChangeinternally, allowing us to keep the old API and hide the new behaviour inside theSelectcomponent. Although usingonValueChangewill still work, I have replaced all our usages both here and in plugins (I'll open PRs shortly)SelectelementautoFocusandrequiredCreatablecomponent to enable that behaviour; format the values to ensure they are displayedYou 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.