Tabs "More Views" doesn't work if tabs component is at a Y position that's below the height of the viewport/frame

[fabregas4]

Summary

When using "Tabs" component in a Shopify embedded app, if you have more tabs than can fit in the container horizontally, it automatically adds a "More Views" button, which when clicked, normally shows a popover with the list of remaining tabs for you to click.

However, this basically only works if the tabs are positioned near the top of the page.

To simulate this just set up a simple route/page with:

	<Page narrowWidth>
		<Box background="avatar-five-bg-fill" minHeight="4000px"></Box>
		<Tabs tabs={tabs} selected={1} onSelect={() => { }} />
	</Page>

and pass it a bunch of tabs - enough for the "More Views" button to appear.

Assuming your embedded app frame is < 4000px tall, you'll need to scroll to get to the tabs.

When you click "More Views" the popover doesn't appear.

Actually, a very quick flash occurs. It appears as if it is jumping to the top of the page, then back down to position, very quickly.

Now update the 4000px to 200px. The "More Views" button works fine again. It shows a popover with all the extra tabs listed.

The point at which it breaks seems to be when the tabs component is positioned just outside frame view. I.e. if it requires any vertical scrolling to reach it.

If I had to guess - it seems like the click is jumping the scroll position to the top for an instant, which would take the popover outside of the field of view, which perhaps triggers the popover to be automatically closed.

Another way to validate this is to Zoom Out on your browser, enough so that the tabs appear on the screen without scrolling. Now click the "More Views" button, and it works fine.

Expected behavior

No response

Actual behavior

Wrap animated gifs/videos in a details tag:

Summary of your gif(s)

Steps to reproduce

Link to sandbox
1.
2.
3.

Are you using React components?

Yes

Polaris version number

12.21.0

Browser

Chrome

Device

Windows PC

[OlivierNguyen]

I have also this issue on 13.1.2. Works fine when zoom out.

Note that LegacyTabs does not have this issue.

[fabregas4]

I haven't dug too deep into the code, but my guess is something is wrong here:

const handleDisclosureActivatorClick = () => {
    setState({
      showDisclosure: !showDisclosure,
      tabToFocus: hiddenTabs[0],
    });
  };

From what I understand this is the handler for when you click on the "More Views" button.

I wouldn't expect that the tabToFocus should change to the first hidden tab, just by clicking this.

As it's hidden, it may be having trouble finding it and hence the scroll position goes to a default position (e.g. top of screen), causing the popover to also disappear, as for a moment it goes out of view.

[fabregas4]

Sure enough, removing the tabToFocus: hiddenTabs[0], line from the code block in my previous comment seems to resolve the issue. It's now working perfectly for me. Not sure if it affects anything else, but hopefully a simple fix that can be applied by the team soon!

[muchisx]

+1 having this issue as well, tabs unusable

[fabregas4]

Any word on this one? Seems like a potentially basic fix. The Tabs are unusable at the moment if they're under the fold. At a point where I need to replace them with some custom component (or LegacyTabs) in order to submit an app to the Shopify app store.

@shopify-admins
@AndrewMusgrave
@chloerice
Sorry to tag but you're the last people I can see that might have a clue about this part of the code/lib

[AndrewMusgrave]

Hey @fabregas4 it's been a hot minute since i've worked on Polaris, but I don't mind looking into the issue.

[AndrewMusgrave]

@fabregas4 I need to do a little more testing, but I put up a pull request with the fix here.

[fabregas4]

Thanks @AndrewMusgrave, much appreciated!

Hope it makes it into a release soon