search

Shopify / shopify-app-bridge

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

ChannelMenu `active` option is ignored #156

Open richardscarrott opened 1 year ago

richardscarrott commented 1 year ago

Describe the bug

The ChannelMenu active option is ignored and instead appears to guess the active link based on the current pathname (something like location.pathname.startsWith(appLink.destination).

To Reproduce

Example taken from the docs here: https://shopify.dev/apps/tools/app-bridge/actions/menu/channel

  1. Visit an app at a url other than /items or /settings (e.g. /account)

  2. Execute the following code

    const itemsLink = AppLink.create(app, {
label: 'Items',
destination: '/items',
});
const settingsLink = AppLink.create(app, {
label: 'Settings',
destination: '/settings',
});
const channelMenu = ChannelMenu.create(app, {
items: [itemsLink, settingsLink],
active: settingsLink,
});

    EXPECT: settingsLink to be active ACTUAL: No links are active

  3. Visit an app at /settings

  4. Execute the following code

    
// ...

const channelMenu = ChannelMenu.create(app, { items: [itemsLink, settingsLink], active: undefined, });

EXPECT: No link to be active
ACTUAL: `settingsLink` is active

### Expected behaviour

The channel menu should not ignore the `active` option and highlight the item passed in, irrespective of url.

## Contextual information

Our app link destination paths go via a proxy url to carry across the shop + host state, which redirects to the actual path. e.g.

```ts
const itemsLink = AppLink.create(app, {
  label: 'Items',
  destination: '/proxy/items', // use proxy url because app links don't support query params
});

// /proxy/items -> /items?shop=foo.myshopify.com&host=123

Packages and versions

Platform