search

Shopify / shopify-app-bridge

https://shopify.dev/docs/api/app-bridge
82 stars 9 forks source link

Using a `ui-title-bar` inside a `ui-modal` breaks the main app titlebar upon navigation if the main app pages also contain `ui-title-bar` #299

Closed darrynten closed 4 months ago

darrynten commented 4 months ago

Describe the bug

If you have a ui-title-bar inside a ui-modal and also have a ui-title-bar on Page A and Page B then navigate between Page A and Page B the titlebar will disappear while the next page is loading.

If you do not add a ui-title-bar to the ui-modal then the titlebar does not disappear when navigating between the 2 routes.

If you inspect the DOM you will see the _ActionsNav_ div inside the <embedded-app> component tag disappears when the titlebar is in the modal, but remains in place when the titlebar is removed from the modal

Expected behaviour

The titlebar should remain in place when navigating if there is a ui-modal on the page that also has a ui-title-bar

Contextual information

Packages and versions

List the relevant packages you’re using, and their versions. For example:

Platform

Additional context

It breaks in the same way whether you use the new ui-nav-menu component or the old Navigation action

jzazove commented 4 months ago

Hey Darryn, could you provide a bit more details on this? Do you have a code snippet you can share?

darrynten commented 4 months ago

I don't have one as I have already reverted back to TitleBar, NavigationMenu, and AppLink provided by v3

If you experience this problem you can just remove all instances of ui-title-bar and use the stable NPM installable v3 versions instead and it will work as expected again without the title bar disappearing on each navigation (although there is no title in the ui-modal now but it's better than a broken experience on every navigation event)