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