`NavigationMenu` matcher custom logic doesn't work

[remy727]

I am going to make navigation active if the URL starts with destination. For example

• If the URL is /shipping, /shipping-dates, /shipping-settings, make /shipping active
• If the URL is /pickup, /pickup-dates, make /pickup active. But this doesn't work.

  
  const urlMatcher = (link, location) => {
  return location.pathname.includes(link.destination)
  };

return (

urlMatcher(link, location)} />

);

Any thoughts on why this doesn't work?

[therealtgd]

I'm using the same logic for my project and it works. Could you include a codesandbox?

[therealtgd]

It stopped working after I restarted the app.

[henrytao-me]

We found the issue. We are pushing the fix now 🙇

[henrytao-me]

Hi @remy727

@shopify/app-bridge-react@3.7.7 should have the fix. Can you try it?

The only thing you need to do is that if you use @shopify/app-bridge-utils, you need to replace it with @shopify/app-bridge/utilities

[remy727]

Hi @henrytao-me, I confirmed it's fixed on @shopify/app-bridge-react@3.7.7 Thank you for the fix! But I noticed it switches twice when I change the menu. I know it's a small issue. I shared the screencast. Hope this helps.

https://github.com/Shopify/shopify-app-bridge/assets/69775411/c39c26d5-5a67-4e0d-9454-81c92d6e9631

[therealtgd]

Hi @henrytao-me, I confirmed it's fixed on @shopify/app-bridge-react@3.7.7 Thank you for the fix! But I noticed it switches twice when I change the menu. I know it's a small issue. I shared the screencast. Hope this helps.

Screen.Recording.2023-05-11.at.13.18.57.mov

I've also noticed this.

[jefflewis]

FWIW, I still see this with 3.7.7.