-
Notifications
You must be signed in to change notification settings - Fork 4.1k
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
Fixes for animated value container and unique keys for options #4860
Fixes for animated value container and unique keys for options #4860
Conversation
Merging in React-Select v5.1
🦋 Changeset detectedLatest commit: 5c465f7 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit 5c465f7:
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Animated seems "jumpy" when selecting options in an empty Select
(Placeholder
stays behind the options for less then a second).
Also the Placeholder
s fade animation doesn't seem to trigger. Doubt it is a cause of this PR, but it should be noted.
I don't think either of the behaviors you mentioned are different than what is currently in master. Regarding the adding a multiValue, I suspect that the flash would be less prevalent if we had some kind of entrance transition on the MultiValue where it expanded instead of simultaneously trying to reconcile removing the Placeholder, add a MultiValue in front of the Input, and change the display style on the ValueContainer. I also noticed that the Placeholder isn't fading in. I tried a few quick fixes but nothing is apparent to me at the moment what is causing it. On a side note, I'd actually be more in favor of completely removing the Placeholder component in the next major release. The inputIsHidden prop could instead be used to clear out the placeholder attribute on the input. I'd prefer this over some of the hackery being added in to account for the placeholder and then the ValueContainer can always be in flex for isMulti instead of constantly checking to see if it hasValue. The animated components likely could use more love (not having the Menu animated seems like the biggest missing), but also I think we'd like to move this to some other repo that allows users to add custom components via hooks. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍
Update changeset to remove associated issue
…e-keys-for-options
…e-keys-for-options
Q: Can anyone suggest on how to make an animated expandable search bar with AsyncSelect? And shall we file an issue for this feature here? |
closes #4844 , closes #4602 ,
Animated components were broken by the display styling change on the ValueContainer as the transition effect occurs after the display switches from flex to grid causing the last value when removed to appear on a new line below the input until the component collapses and is removed.
Screen.Recording.2021-10-14.at.1.29.05.PM.mov
This PR addresses this by passing in an onExited prop to the AnimatedMultiValue as a callback to set the display to grid only after the last value has been removed. Additionally, it accounts for the Placeholder component hiding it until the container has been full set to grid position.
Additionally, previous MultiValue animations were broken as the index of each Option was changed when options were removed from the beginning or middle of the list, because the options index was being used to generate the key. This PR addresses this by generated the key based on the existing methods used to stringify key and value and concatenate them.
Screen.Recording.2021-10-14.at.1.27.42.PM.mov
Here is a video screen share with the above methods being used demonstrating the differences.
Screen.Recording.2021-10-14.at.1.36.26.PM.mov