search

Shopify / shopify-app-bridge

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

Unable to to go back in the history with browser back when App title navigation used #159

Open kaarelss opened 1 year ago

kaarelss commented 1 year ago

Describe the bug

It is unable to go back in history using browser back when App Title navigation is used. The one in the image below.

Screenshot at Nov 02 12-19-37

To Reproduce

Steps to reproduce the behaviour:

  1. Create a new Shopify bootstrap application, following your own tutorial: https://github.com/Shopify/shopify-app-template-ruby/blob/main/README.md
  2. Configure routerConfig for the Provider like this
const location = useLocation();
  const navigate = useNavigate();
  const history = useMemo(
    () => ({
      replace: (path) => {
        navigate(path, {replace: true});
      },
    }),
    [navigate]
  );

  const routerConfig = useMemo(
    () => ({ history, location }),
    [history, location]
  );

So here are two cases. One which is successful when clicking on the Home side navigation menu, and the other - unsuccessful when clicking on the App title. They both should work the same.

Successful case when using Home side navigation

  1. Open app from admin
  2. Navigate to Page name using side navigation
  3. Navigate to Home side navigation menu
  4. Click browser back (expect to navigate to Page Name)
  5. Click browser back (expect to navigate to Home)
  6. Click browser back (expect to navigate to Admin)

Case where browser back is no longer working after clicking on App title navigation

  1. Open app from admin
  2. Navigate to Page name using side navigation menu
  3. Click on the App title in the side navigation menu to go to home page
  4. Click browser back (expect to navigate to Page Name, but nothing happens)

Looking at the chrome history we can see that there is additional Page name record in the history stack after clicking on the App title. Look at the image.

Screenshot at Nov 02 12-11-04

Expected behaviour

Both cases mentioned above should work the same. Shopify design guidelines mentions that App title navigation should be used for the landing page instead of one defined in the side navigation menu component e.g. Home. But if the App title navigation works differently than Home, we are unable to use side navigation without Home option in it.

Contextual information

Packages and versions

Platform

@itissible/matrixify