[BUG] Incorrect spacing when placed inside Material UI transition component

[sterlingwalsh]

Describe the bug
When Virtuoso is inside a "Grow" transition component provided by material ui, the items are truncated early leaving a large gap in the list

Reproduction
sandbox.

To Reproduce
Steps to reproduce the behavior:
In sandbox above,

1. click toggle button to open the dropdown component
2. start scrolling

Expected behavior
elements would fill available space

Screenshots
sandbox is sufficient

Desktop (please complete the following information):

• OS: Windows
• Browser: Chrome

Additional context
My actual project example also had margin issues resulting in the partial list of items that were displayed to be shifted up and never being able to scroll to the first item after scrolling down the list. That was not reproduced in the sandbox for some reason but alll issues are resolved just by removing the grow component.

[petyosi]

From my experience, CSS transitions and resize observers don't get along very well, with ResizeObserver not reporting the final value. Feel free to investigate further and suggest a workaround.

[mortmoe]

Have the same problem after upgrading from virtuoso 1.9.3 today. Possible workaround could be to delay the rendering of virtuoso until dialog (or grow) is done: https://codesandbox.io/s/virtuoso-material-transition-fixed-vm7zsu

Would it be possible to have a method triggering recalculation so we could do that onEntered (instead of using a state and delay like I've shown in the sandbox)?

[qcz]

Same happens if you place a Virtuoso list inside a BlueprintJS Dialog component (uses transition when opening).