[Tabs] Misplacement of the tab indicator if the parent AppBar width change

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

This issue may be related to the issue #8379.

Current Behavior 😯

I use the example of AppBar providing here, I added tabs in the middle of the AppBar. When the side bar is opened, the indicator below the selected Tab is not correct positioned.

As an image worth a thousand words:

Expected Behavior 🤔

When I open the side bar, I expect the indicator to be well positioned under the selected Tab.

Steps to Reproduce 🕹

You can find a link to sandbox which reproduce the case. There’s also the same case is this repository.

Steps:

1. Click on the menu button (top left of the screen),
2. Pay attention to the position of the Tab indicator,
3. Click on the left chevron icon to close the side bar,
4. Pay attention to the position of the Tab indicator.

Your Environment 🌎

Even with the latest releases of material-ui (with sandbox), the behavior is the same.

`npx @material-ui/envinfo`

  System:
    OS: Linux 4.15 Ubuntu 18.04.5 LTS (Bionic Beaver)
  Binaries:
    Node: 13.7.0 - ~/install/node-v13.7.0-linux-x64/bin/node
    Yarn: Not Found
    npm: 6.14.9 - ~/install/node-v13.7.0-linux-x64/bin/npm
  Browsers:
    Chrome: 87.0.4280.66      (I use chrome!)
    Firefox: 83.0
  npmPackages:
    @material-ui/core: ^4.11.2 => 4.11.2 
    @material-ui/icons: ^4.11.2 => 4.11.2 
    @material-ui/styles:  4.11.2 
    @material-ui/system:  4.11.2 
    @material-ui/types:  5.1.0 
    @material-ui/utils:  4.11.2 
    @types/react:  17.0.0 
    react: ^17.0.1 => 17.0.1 
    react-dom: ^17.0.1 => 17.0.1

[oliviertassinari]

@frozar In your case, I would apply the action ref and do:

  const actionRef = React.useRef();

  React.useEffect(() => {
    const timeout = setTimeout(() => {
      actionRef.current.updateIndicator();
    }, theme.transitions.duration.enteringScreen);

    return () => {
      clearTimeout(timeout);
    };
  }, [open, theme]);

  //…

  <Tabs action={actionRef} />

https://codesandbox.io/s/practical-payne-s2pkw?file=/src/index.js:2725-2998

[frozar]

When I read the previous issues, I realise that there is a lot written on this topic and that is still a hot topic.

As this issue is popular, it would be really helpful to have a basic example of the updateIndicator() method. It would save a lot of time to many people and also provide a concrete example of the current recommended work around on this issue.

@oliviertassinari Can you fix the basic case I provided in my sandbox link to show how to use updateIndicator() method please?

I would really like to contribute to material-ui lib but I’m honestly, I’m not ready for this. There’s still a lot of things that doesn’t fit in my head currently ^^’