You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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:
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.
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.
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!
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:
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
The text was updated successfully, but these errors were encountered: