search

Shopify / shopify-app-bridge

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

In-app navigation does not highlight (activate) path from NavigationMenu #154

Open kaarelss opened 1 year ago

kaarelss commented 1 year ago

Describe the bug

App bridge does not highlight or activate path in side menu when using in-app navigation with <NavLink> from react-router-dom to the path defined in NavigationMenu component. This happens only when side menu is never used. If you use any of the side menu paths and then use in-app navigation, then the highlighting is working.

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. In index.js add the react-router-dom <NavLink> to create in-app navigation 
    import { NavLink } from 'react-router-dom';
...
<Heading>Nice work on building a Shopify app 🎉</Heading>
<NavLink to={'/pagename'}>Go to page name</NavLink>
...
  3. Run the app.
  4. Inside the app use the previously created Go to page name link.
  5. See that the Page name is not highlighted in the side menu.
  6. Click on the Home in the side menu.
  7. Click on the Go to page name again and see that the highlighting is correct now in the side menu.

See the following video showing how it behaves: https://youtu.be/7pElmaGBNwQ

Expected behaviour

It should always highlight current path in NavigationMenu.

Contextual information

Packages and versions

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

Platform

@itissible/matrixify

elanalynn commented 1 year ago

Hi @kaarelss! Thank you for the detailed reproduction steps. We are able to reproduce the bug, but only the very first time we add the import/link to the index. After that, refreshing the page, removing and and re-adding the code don't seem to cause the same issue. This may be timing issue in development and we will investigate it.

kaarelss commented 1 year ago

Hi @elanalynn. Thank you for looking into this. I’m not sure I understood correctly what you meant by adding import/link to the index. But testing on our app it seems to work now. Although it's still not working on the template app with the steps above. Did you made any changes?

bithaolee commented 2 months ago

Any update?