[Bug] Custom Value container issue in animated components.

[manjushsh]

Hi React Select Team,

I am rendering a custom Value Container in Multiselect. But the issue is that I can see options selected in normal select but when I try to render with animated components, it just wont render. I am attaching both selects as sandbox below.

Select with animation Same multiselect without animate

Please let me know if this is an implementation issue from my end and not a bug

[suman313]

Hi React Select Team,

I am rendering a custom Value Container in Multiselect. But the issue is that I can see options selected in normal select but when I try to render with animated components, it just wont render. I am attaching both selects as sandbox below.

Select with animation Same multiselect without animate

Please let me know if this is an implementation issue from my end and not a bug

Hi, replace your components in Select like this: components={{ ValueContainer, ...animatedComponents, Option }} It should work. The reason is If we place animatedComponents before ValueContainer, then ValueContainer won't be able to customize the appearance of the selected options because animatedComponents would have already rendered them. Hope it helps.

[manjushsh]

Hi @suman313, Thanks for your reply. It works as expected. I had one more doubt here, why do we need to add Option at end? I tried animatedComponets at end and it didn't work.

Sequence: ValueContainer, Option, ...animatedComponents This overwrites my custom Option component

[suman313]

Hi @suman313, Thanks for your reply. It works as expected. I had one more doubt here, why do we need to add Option at end? I tried animatedComponets at end and it didn't work.

Sequence: ValueContainer, Option, ...animatedComponents This overwrites my custom Option component Yes. Because as far I understood from their documentation, animatedcomponents wraps the original components and provide animated versions of them and therefore it is important to put animatedComponents before Option which makes sure that it wraps the Option component before its(Option) rendering and animates the default styling of Option component. Please assign me this issue if it solves your problem. I am new to Open source and doesn't know much about it. Thanks in advance. Happy coding.

[manjushsh]

Hi @suman313 I want to assign it to you but github wont allow me to do so as you can see in screenshot

[manjushsh]

Thanks @suman313 for solution