S-modal is not working when triggered from a menu

Polaris
1

Hello,

I am trying to create a Shopify app using the latest React Router 7 starter template and I find out Polaris web components are not working as expected, there are tons of issues when using them. For example, if you have an action menu that can open s-modal, the trigger does not always work, here is an example:

import { useLoaderData } from "react-router";

type Theme = { id: string; name: string };

export async function loader() {
  const themes: Theme[] = [
    { id: "nature", name: "Nature" },
    { id: "space", name: "Space" },
    { id: "ocean", name: "Ocean" },
    { id: "desert", name: "Desert" },
    { id: "forest", name: "Forest" },
  ];

  return {
    themes,
  };
}

function ThemeItem({ theme, index }: { theme: Theme; index: number }) {
  return (
    <s-grid gridTemplateColumns="1fr auto" alignItems="center" padding="base" border="base" borderWidth={index === 0 ? "none" : "base none none none"}>
      <s-stack>{theme.name}</s-stack>
      <s-stack direction="inline" gap="base">
        {/* buttons */}
        <s-button accessibilityLabel="Themes actions" icon="menu-horizontal" commandFor={`menu-${theme.id}`} command="--show"></s-button>
        <s-button>Preview</s-button>
        <s-button variant="primary">Edit</s-button>
        {/* menu */}
        <s-menu id={`menu-${theme.id}`} accessibilityLabel="Theme actions">
          <s-button commandFor={`rename-modal-${theme.id}`} command="--show">
            Rename
          </s-button>
          <s-button commandFor={`delete-modal-${theme.id}`} command="--show" tone="critical">
            Delete
          </s-button>
        </s-menu>
        {/* rename modal */}
        <s-modal id={`rename-modal-${theme.id}`} heading="Rename Theme" accessibilityLabel="Rename theme modal">
          <s-text>Rename {theme.name}?</s-text>
          <s-button slot="secondary-actions" commandFor={`rename-modal-${theme.id}`} command="--hide">
            Close
          </s-button>
        </s-modal>
        {/* delete modal */}
        <s-modal id={`delete-modal-${theme.id}`} heading="Delete Theme" accessibilityLabel="Delete theme modal">
          <s-text>Delete {theme.name}?</s-text>
          <s-button slot="secondary-actions" commandFor={`delete-modal-${theme.id}`} command="--hide">
            Close
          </s-button>
        </s-modal>
      </s-stack>
    </s-grid>
  );
}

export default function AppTestRoute() {
  const data = useLoaderData<typeof loader>();

  return (
    <s-page heading="Themes">
      <s-section padding="none">
        {data.themes.map((theme, index) => (
          <ThemeItem key={theme.id} theme={theme} index={index} />
        ))}
      </s-section>
    </s-page>
  );
}

Sometimes they open, sometimes not.

Any ideas how to achieve such functionality? I think web components are not yet ready for production…

Thanks!

2

In addition, here is a video explaining the problem. Click on some actions does not trigger the s-modal: CleanShot 2026-01-27 at 13.41.46 · CleanShot Cloud

3

Thanks for reporting this (and for sharing the code + video)!

The issue causing <s-modal> to intermittently not open when triggered from an <s-menu> has now been fixed, and is included in the latest CDN script update. Please try your code again.

If you’re still able to reproduce it, reply here and we can take another look.

4

Hello,

It seems better but issue is not completely solved, sometimes modals are still not shown (it doesn’t happen too often now).

Thanks!