Material-ui: Using tabs inside a popover incorrectly calculates the left offset based on bounting box calculations

[AncientSwordRage]

• [x] The issue is present in the latest release.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Opening a popover that contains tabs incorrectly determines the 'start' position of the indicator, which appears offset from the page, not the containing popover

Expected Behavior 🤔

The start position of the indicator should be calculated from the containing element.

It looks like this issue https://github.com/mui-org/material-ui/issues/9337 but it is not, because when we implement the useEffect solution it still does not correctly calculate the offset.

Looking at the internal material code something is going wrong in calculating tabMeta.left - tabsMeta.left on load because the laculation ends up being 16 - 173 (in our example), but if I change tab and then change back it correctly works out that it's 16 - 16. It's as though the tabsMeta calculates it's boundingClientRect too soon.

Steps to Reproduce 🕹

Steps:

1. Create a component using popover
2. Put tabs inside
3. Notice the indicator is offset incorrectly
4. cry

Attempts to fix

Tries to use a setTimeout in a useEffect.

Context 🔦

Tabs in a popover

Your Environment 🌎

| Tech | Version |
| ----------- | ------- |
| Material-UI | ^4.5.3 |
| React | ^16.10.2 |
| Browser | Chrome |

[oliviertassinari]

@AncientSwordRage We appreciate the time spend in the issue description and reproduction, but I'm closing as a duplicate #9337.

[oliviertassinari]

but it is not, because when we implement the useEffect solution it still does not correctly calculate the offset.

Consider the impact of the animation running.

[AncientSwordRage]

but it is not, because when we implement the useEffect solution it still does not correctly calculate the offset.

Consider the impact of the animation running.

How would one do that?

[oliviertassinari]

You could use a setTimeout to account for it.

[AncientSwordRage]

Set timeout doesn't have any effect. I can update the example to reproduce with what I've attempted.

[AncientSwordRage]

You could use a setTimeout to account for it.

Edited main issue with my attempt to fix there.

[AncientSwordRage]

@oliviertassinari I've also tested with useLayoutEffect and it made no difference.

[AncientSwordRage]

I call updateIndicator() in an onEntered callback.