On selecting the first suggested value the width size is incorrect

[AlfeeAeman]

When searching and selecting the first suggested value from the options, the style is incorrect. On using animated components as props

[manjushsh]

@AlfeeAeman Any specific version?
It works just fine in this Code Sandbox

[AlfeeAeman]

I am using 5.3.2

[AlfeeAeman]

this is specifically because i am using animated component.

[AlfeeAeman]

import makeAnimated from "react-select/animated"; const animatedComponents = makeAnimated(); <Select components={animatedComponents} isMulti {...rest} />

[manjushsh]

looks like a bug

[manjushsh]

@AlfeeAeman, you can use react-select v.5.1.0 if that works for you.
It seems have this issue from 5.2.0 onward. Use 5.0.0 if you see any animation issues.
It works fine in this version. Code Sandbox

[AlfeeAeman]

Yes this version solves the problem of styling but it has other issue for example the placement to input cursor is after the placeholder value

[manjushsh]

@AlfeeAeman, In 5.1 it seems to be working.. but not ideal solution though..

And also, there is issue of textbox size in clear animation in this version. I have created a bug for the same.

[imliuyzh]

Can confirm this. So far, I must either get rid of animations in the component or use !important in the styling:

const styles = {
    valueContainer: (styles) => ({
        ...styles,
        '& div:first-of-type': {
            width: 'fit-content !important'
        }
    })
};

Since I want my code to be as clean as possible, guess I will just stop using animations.

[manjushsh]

@imliuyzh Raised this issue. Hope they will fix it in future releases #5205