Solved

Embedded app stopped visually switching tabs

keiraarts
Shopify Partner
53 7 10

I had a fully working embedded app (React, Node) that stopped showing active tabs overnight.

Video demo: https://gyazo.com/08c8672ff658cd1b2b3c8292d3259a05

There were no code changes and rolling back the app to a week prior still has the issue.

If I refresh the entire page Shopify switches the tab, but will persist that tab regardless of what I select next.

Does anyone know what setting in the <Provider> component alerts Shopify of tab changes?

Head of space operations on the Shopify moon-base.
Building orderediting.com, viaGlamour.com, magicsoaps.ca
Accepted Solution (1)
keiraarts
Shopify Partner
53 7 10

This is an accepted solution.

Looks like the tabs switch again! 

Head of space operations on the Shopify moon-base.
Building orderediting.com, viaGlamour.com, magicsoaps.ca

View solution in original post

Replies 11 (11)

iain-campbell
Shopify Staff (Retired)
54 9 23

Hi keiraarts,

 

Thanks for the bug report, I’m looking into it. By overnight, do you mean sometime between Sept 17 and Sept 18?

 

To help me narrow this down, are you using client-side routing, ie using React Router? Does your app use the method described under 'Using client-side routing' here: https://help.shopify.com/en/api/embedded-apps/app-bridge/actions/navigation?

 

Iain

To learn more visit the Shopify Help Center or the Community Blog.

keiraarts
Shopify Partner
53 7 10

Yes @iain-campbell - at Sept 17th 2:00AMEST the app stopped visually responding to tab switching.

It's important to know the content still changes, the tab just doesn't get the underline. Rolling back the app to different versions from the app development still has the same problem. 

https://gyazo.com/bcc35767ac2f0bf770912ef855b4646d

The app is not using React Router. It's being served by Nextjs. I'm not manipulating the app context or app history when a new tab loads.

If you can give me your email, I can share my full git repository with you!

Head of space operations on the Shopify moon-base.
Building orderediting.com, viaGlamour.com, magicsoaps.ca
iain-campbell
Shopify Staff (Retired)
54 9 23

Got it, thanks for clarifying for me. I think we’ve identified the issue on our end. There’s nothing wrong with your app 🙂 A recent change we shipped had an unintended side effect. We’ll update you once our fix has shipped.

To learn more visit the Shopify Help Center or the Community Blog.

keiraarts
Shopify Partner
53 7 10

Thank you! I owe you one for investigating this mystery.

Head of space operations on the Shopify moon-base.
Building orderediting.com, viaGlamour.com, magicsoaps.ca
steveryan
Tourist
3 1 1

I was going crazy trying to figure out what I did to break this. Same setup here (next.js, node, react) and same problem with the navigation working, but the active page indicator not changing. 

 

Thanks!

keiraarts
Shopify Partner
53 7 10

This is an accepted solution.

Looks like the tabs switch again! 

Head of space operations on the Shopify moon-base.
Building orderediting.com, viaGlamour.com, magicsoaps.ca
iain-campbell
Shopify Staff (Retired)
54 9 23

Yes, our fix is live. Thanks for confirming!

To learn more visit the Shopify Help Center or the Community Blog.

samarv
New Member
6 0 0

Hey, 

 

I have the exact same issue. Everything was working  with Next, koa -> added client side routing -> tabs didn't switch -> rolled back code -> Tabs are still not highlighting. I should add that it is navigating to diffrent page but there are no visual feedback on tab Change.  . 

darrynten
Shopify Partner
46 3 15

Has this started happening again?

@darrynten
darrynten
Shopify Partner
46 3 15

I can confirm this is now happening in all my apps as of Apr 27 2021 @ ~16:00 GMT+7

@darrynten
Travis25
Visitor
2 0 0

@iain-campbell Did you guys fix that issue I am also facing that ?

I have just switched to client side routing and I am using AppBridgeClientRouter with history prop any insights into this issue would be much appreciated.
Thanks!