calculatePosition is called to measure content dimensions before the content is in the wormhole

[DingoEatingFuzz]

What happened

This is best explained with a couple screenshots.

The moment reposition, and subsequently calculatePosition is called, the content component is still a sibling of the dropdown trigger. The consequence in this case is a scrunched width due to the content component being in a flexbox wrapper and having labels that lend itself well to linebreaks. This results in a very tall element (269px).

The dimensions of the content component in this intermediate state are then used to compute the final top inline style, but as you can see in the second screenshot, now that the content component is in the wormhole, text doesn't wrap and the content component is half the original height (125px). So the top positioning is off by 144px.

What I expected to happen

The dimensions of the content component should be calculated based on its final position in the DOM. This would correctly position the dropdown above the trigger.

Suggestion on how to fix this

Hopefully fixing this is a simple matter of slapping a schedule.once('afterRender', ...) somewhere? I didn't read through the source too much, but I saw enough to know that there's a lot of nuance 😄

Workarounds for the time being

If anyone else is running into funky offsets, be mindful of your styles in different contexts. Watch out for cascading margins and paddings, and maybe use a white-space: nowrap to be safe.