Fixes for animated value container and unique keys for options

[ebonow]

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

[changeset-bot]

🦋 Changeset detected

Latest commit: 5c465f7

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
react-select	Minor

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

[codesandbox-ci]

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:

Sandbox	Source
react-codesandboxer-example	Configuration
restless-grass-rvi1j	Issue #4602

[Rall3n]

Animated seems "jumpy" when selecting options in an empty Select (Placeholder stays behind the options for less then a second).

Also the Placeholders fade animation doesn't seem to trigger. Doubt it is a cause of this PR, but it should be noted.

[ebonow]

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.

[JedWatson]

👍

[Saga4]

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?