'animatedComponents' is not behave as before in version 5

[Soberia]

Clearing animation in version 5, producing a gap in the Input field.
Same result with disabled custom styles.

React 17.0.2
Microsoft Edge 96.0.1032.0 / Windows 11
Mozila Firefox 93.0 / WSL Ubuntu

Version 4.3.1

Version 5.1.0

[ebonow]

The recent version update from 4 to 5 included an update to remove the absolute positioning of the SingleValue and Input components, but their container (ValueContainer), needs to be set to grid when:

1. isMulti = false
2. isMulti = true and there are no selected values (to allow the placeholder to overlap with the input)

This means however that when the final value is removed, the positioning immediately flips to grid, causing the new value to be sent to a new row until it is removed from the DOM.

Not entirely sure of the best way to address this though I believe the options are to delay the styling of the ValueContainer from flex to grid until after the last item is removed or to perhaps apply styling so that the last MultiValue is given the same grid-cell coordinates as the input.