Rendering a DataTable causes browser window to scroll to top of page

[mfurniss]

Issue summary

Rendering a DataTable component causes the browser window to scroll to the top of page.
This makes it quite difficult to use a Shopify Polaris app in which DataTables are rendered based on other UI component states.

Expected behavior

Rendering a DataTable should not scroll the browser window to the top.

Actual behavior

Browser window is scrolled to top of page when DataTable component is rendered.

Steps to reproduce the problem

I'm using the Polaris Tabs component to selectively render DataTables.

1. Create a page with at least 2 Tabs.
2. Based on the tab selection render a DataTable
3. When the tabs are switched the browser window will be scrolled to top of page

Specifications

• Polaris version: 2.0.0
• React version: 16.3.2
• Browser: Chrome 66.0.3359.139
• Device: MacBook Pro
• Operating System: MacOS 10.13.3

[chloerice]

Hi @mfurniss thanks for raising this issue--digging into this now.

[johnnunns]

Any update on this?

[chloerice]

Hi @johnnunns, still working on isolating whether the issue is with the tabs component or the data table itself.

It's expected behavior for the first focusable item of a page to be focused upon switching tabs for accessibility reasons (this announces a new context to screen readers). What I'm looking into right now is whether the page scrolls to the top when there isn't a focusable item. We typically use tabs at top of page level, not as navigation within cards (with the exception of a modal content use case, which is still top of view) so this may be expected behavior.

[johnnunns]

@chloerice I believe the code is in the data table itself. I've tested with other components inside the tabs and never seen it jump to the top of the page as it does each time it renders a DataTable component.

[mfurniss]

It's the DataTable. I just used Tabs in my example use case. I have not found any problem with the Tabs component.

Rendering a DataTable, even in isolation of other components, causes the page to scroll to top.

[mfurniss]

Any update on this issue? @chloerice

[chloerice]

Hey @mfurniss, the fix will ship with the 2.1.0 release this week.