navigationMenu.set function doesn't work properly

[redareda9]

Describe the bug

After creating a navigation menu using NavigationMenu.create, the menu shows up but calling set function doesn't update the menu as described by the description.

To Reproduce

Steps to reproduce the behaviour:

1. Build an embedded app
2. Create a menu using NavigationMenu.create
3. Subscribe to redirects using app.subscribe(Redirect.Action.APP
4. Set active menu from callback to update the active menu Item
5. Look at the menu not updating itself

 const dashboardLink = AppLink.create(app, {
    label: 'Dashboard',
    destination: '/',
  });
  const settingsLink = AppLink.create(app, {
    label: 'Settings',
    destination: '/settings',
  });

  const menuItems = [dashboardLink, settingsLink]

  let navigationMenu = NavigationMenu.create(app, {
    items: menuItems,
    active: undefined
  });

  useEffect(() => {
    app.subscribe(Redirect.Action.APP, (payload: Redirect.AppPayload) => {
      console.log(`Navigated to ${payload.path}`)
      const item = menuItems.find(i => i.destination === payload.path)
      console.log('item :>> ', item);
      navigationMenu = navigationMenu.set({ active: item })
    });
  }, [app])

Expected behaviour

The navigation menu item should become active as soon as we click on it.

Contextual information

Packages and versions

• "@shopify/app-bridge-react": "^2.0.2"
• "@shopify/polaris": "^6.2.0",

Additional context

I'm using NextJS and Next-router to handle client routing and not refresh the page.

[zappingseb]

same here

[henrytao-me]

Hi @zappingseb I just tested it again on my test app, it works as expected. The menu item is active as soon as it is clicked.