[Tabs] Update position when layout change (ResizeObserver)

[samdenty]

• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Tab indicator should dynamically resize its width when the parent container width changes

Current Behavior

Tab indicator doesn't resize when the parent container width changes ~ only when the viewport size does

When parent container size changes:

What it should look like / what it looks like after triggering a re-render:

Steps to Reproduce (for bugs)

1. Create a container with a child tab element in it (fullwidth)
2. Resize the parent container programmatically (not by changing the viewport)

Context

I'm using the tabs in a appbar using the persistent drawer layout, opening / closing the menu breaks the tab indicators until a manual re-render

Your Environment

Tech	Version
Material-UI	1.0.0-beta.20
React	15.5.4
browser	Chrome 63.0.3239.59

[samdenty]

I ended up just triggering a window resize event

window.dispatchEvent(new CustomEvent('resize'))

[robertsoniv]

We observe this same issue when using fontDisplay: swap with our custom fonts. Since our custom font is not as wide as browser default, the indicator is always off on first page load.

[AncientSwordRage]

I observe the same issue when we have the tabs in a popover, but the fix below does not work for us

We have added an action prop to the Tabs component since to solve the problem. You can trigger the .updateIndicator() method when you need to update the position of the indicator.

For instance:

function MyTabs() {
  const tabsActions = React.useRef();

  React.useEffect(() => {
    if (tabsActions.current) {
      tabsActions.current.updatePosition();
    }
  }, [x]);

  return <Tabs action={tabsActions}>{items}</Popover>;
}

[craigpullar]

We find the same issue with the Modal and the ref/resize fix does not work for us either

[AncientSwordRage]

We find the same issue with the Modal and the ref/resize fix does not work for us either

See my fix here #19786 (comment)

[luan-dang-techlabs]

I observe the same issue when we have the tabs in a popover, but the fix below does not work for us

We have added an action prop to the Tabs component since to solve the problem. You can trigger the .updateIndicator() method when you need to update the position of the indicator.
For instance:

function MyTabs() {
  const tabsActions = React.useRef();

  React.useEffect(() => {
    if (tabsActions.current) {
      tabsActions.current.updatePosition();
    }
  }, [x]);

  return <Tabs action={tabsActions}>{items}</Popover>;
}

This worked well for me 👍 thanks for the help.

const containerRef = useRef(null);
const actionRef = useRef<TabsActions | null>(null);

useEffect(() => {
    const ro = new ResizeObserver(() => {
      if (actionRef.current && containerRef.current) {
        actionRef.current.updateIndicator();
      }
    });

    if (containerRef.current) {
      ro.observe(containerRef.current);
    }
  }, [containerRef.current, actionRef.current]);



<Container ref={containerRef}>

            <TabList
              action={actionRef}
              value={searchTab}
              onChange={handleSearchTabChange}
              indicatorColor="primary"
              centered
            >
....