`NavigationMenu` link needs to be clicked 2 times in order to set it as active

[therealtgd]

Describe the bug

As the title states, the links in the NavigationMenu need to be clicked 2 times in order to set them as active. The navigation works right away, but on first click the active link doesn't change.

I'm using file-based routing from the Shopify React App Template generated using the Shopify CLI. Below is the code for the NavigationMenu.

import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import { I18nContext } from '@shopify/react-i18n';
import { configurePersistable } from 'mobx-persist-store';
import { NavigationMenu } from '@shopify/app-bridge-react';

import Routes from '~/Routes';
import { AppBridgeProvider, PolarisProvider } from '~/components';
import i18nManager from '~/localization/i18n';
import { StoreProvider } from '~/stores';

export default function App() {
  // Any .tsx or .jsx files in /pages will become a route
  // See documentation for <Routes /> for more info
  const pages = import.meta.globEager('./pages/**/!(*.test.[jt]sx)*.([jt]sx)');

  configurePersistable(
    {
      storage: window.sessionStorage,
    },
    { delay: 200, fireImmediately: false },
  );

  return (
    <I18nContext.Provider value={i18nManager}>
      <PolarisProvider>
        <BrowserRouter>
          <AppBridgeProvider>
            <StoreProvider>
              <NavigationMenu
                navigationLinks={[
                  {
                    label: 'Products',
                    destination: '/home',
                  },
                  {
                    label: 'Collections',
                    destination: '/collections/index',
                  },
                  {
                    label: 'Tags',
                    destination: '/tags',
                  },
                ]}
                matcher={(link, location) => location.pathname.includes(link.destination)}
              />
              <Routes pages={pages} />
            </StoreProvider>
          </AppBridgeProvider>
        </BrowserRouter>
      </PolarisProvider>
    </I18nContext.Provider>
  );
}

Expected behavior

The NavigationMenu link should be set as active on the first click.

Contextual information

Packages and versions

• @shopify/app-bridge @ 3.7.6
• @shopify/app-bridge-react @ 3.7.6
• @shopify/polaris @ 10.43.0

Platform

• OS: MacOS
• OS Version: 13.0.1
• App: Chrome

[danyn]

This is true

[henrytao-me]

We identified the bug and working on the fix. It should be up soon. 🙇

[henrytao-me]

This is fixed. See https://github.com/Shopify/shopify-app-bridge/issues/198#issuecomment-1542214163 🙇