Polaris-react: Tabs loading inconsistently with SSR application

Created on 3 Feb 2020 · 4Comments · Source: Shopify/polaris-react

Issue summary

This issue appears in an internal SSR application.

The tabs load in small-device/collapsed view when I refresh the page, but the tabs load as expected when I navigate to the page via a button/link.

From Reload:

From url/path navigation to the page that contains these tabs:

Issue appears with both React v16.9.0 and v16.12.0. I tried using both query parameters, and useState to manage the selected tab index but neither approaches solved this issue.

Using fitted tabs does not fix this issue either.

It seems that the bug does not appear on the initial load, but it does when I refresh the page.

Expected behavior

The tabs should load the same way after reloading and navigating to the page.

Actual behavior

The tabs load differently if we refresh/reload the page vs. if we naturally navigate to the page.

The contents inside the Tabs are static

    <Page
      fullWidth
      title="Some Title"
      separator
    >
      <Layout>
        <Layout.Section>
          <Card sectioned>
            <Tabs
              tabs={tabs}
              selected={tabIndex}
              onSelect={handleTabChange}
            >
              <Card.Section>{tabs[tabIndex].component}</Card.Section>
            </Tabs>
          </Card>
        </Layout.Section>
      </Layout>
    </Page>

Steps to reproduce the problem

Set up server-side rendered React application
Reload page that contains Polaris tab components

Reduced test case

I followed the example in https://polaris.shopify.com/components/navigation/tabs and wrapped it in a sectioned Card and a Polaris Layout component.

The issue exists with SSR.

Specifications

  System:
    OS: macOS 10.15.2
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Memory: 2.24 GB / 32.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 10.17.0 - ~/.nvm/versions/node/v10.17.0/bin/node
    Yarn: 1.19.1 - ~/.dev/yarn/1.19.1/bin/yarn
    npm: 6.11.3 - ~/.nvm/versions/node/v10.17.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Browsers:
    Chrome: 79.0.3945.130
    Safari: 13.0.4
  npmPackages:
    @shopify/polaris: 4.10.2 => 4.10.2
    react: 16.12.0 => 16.12.0
    react-dom: 16.12.0 => 16.12.0

🐛Bug

Source