List doesn't get rendered when items are loaded async and select component is hidden

[SEUH]

I load the items for the multi select component asynchonously and the component is hidden at render time.

Expected Behavior

Items render normally

Actual Behavior

Items don't render

Steps to Reproduce the Problem

Just set the items variable asynchonously and set display none of component
Here's a reproduction setup (i use bootstrap tab for simplicity, but it should be equivalent to the setup i described): https://codesandbox.io/s/94nlm5mjrr

Specifications

• Version: v1.0.73
• Platform: Chrome/Ubuntu 18
• Subsystem:

My guess is that at render time, due that the component is not visible, it has no actual height. And because this package uses "react-height" i think that might be the problem.

[liorheber]

Thanks @SEUH !
@stepovat if this is indeed a case (I did not have a look), caused by react-height, I think it's time to replace that package.
It hasn't been supported for a while, it's been giving us other issues and we can produce it's feature in other means.

[yegor-babiy]

hey,
I replaced approach with react-height, works perfect, please take a look ( @liorheber @stepovat )
@SEUH Thanks for deep investigation!

[stepovat]

Hi @SEUH, we have merged the solution, it is included into v1.1.1 release.
Please tell if it is ok now,
Thanks

[SEUH]

@stepovat This doesn't seem to be fixed. Have a look at the updated reproduction setup (now with v1.1.1) https://codesandbox.io/s/r5q843yjq

[yegor-babiy]

@SEUH Could you please tell if it reproduces for you not in the scope of codesandbox?

[SEUH]

Sorry for the late response. It still fails in my local setup

[MaksimDrobchak]

@SEUH Sorry, but this problem is not react-multi-select. If you use https://react-bootstrap.github.io/components/tabs/#tab-props. You need mountOnEnter = {true} in the second tab.
In documentation react-bootstrap, describes in more detail why this happens.
<Tab eventKey="categories" title={"was not visible at render time"} mountOnEnter={true} >

Сould you please recheck and give feedback for us if it works for you, thanks!

[SEUH]

@MaksimDrobchak The problem is with react-multi-select. I adjusted the reproduction setup (removed bootstrap) to make it clearer https://codesandbox.io/s/affectionate-worker-6wt8r

This should be self-explanatory: The component is rendered & mounted but with "display: none" the component is not visible and has no height in the dom. If you take a closer look not only the items are not rendered but also the container for the items.

And "mountOnEnter" should also be self-explanatory. This only means that the component is only mounted when tab enter and thus not hidden, which means that the error does not occur.

A picture for illustration (took from reproduction setup output code):

[SEUH]

Still not working with v1.1.5. Is there any update on this?

[binnyFriedman]

same by me here any update?

[liorheber]

Hi, I'm sorry it took us time to reply.

We are currently a bit short on maintenance capacity for the component internally.
While we do plan to fix more bugs in the future, this may take some considerable time.

Therefore, I encourage you or anyone else to contribute fixes to the component.
We would be more than happy to assist anyone who would want to contribute.