Title bar primary action from s-page does nothing on Chrome for Windows after a client-side navigation, works once the mobile viewport is toggled

Summary

A merchant on Chrome for Windows cannot use the primary action my app puts in the admin title bar via <s-page>. Clicking the button does nothing: the onClick handler never runs, no request leaves the app, no console error. The same click works the moment she opens DevTools and switches to the mobile viewport. It has now happened on three separate days over the last two weeks, always straight after a client-side navigation. I cannot reproduce it on Chrome for macOS.

Setup

  • Embedded app, App Home, Polaris web components loaded from https://cdn.shopify.com/shopifycloud/polaris.js with https://cdn.shopify.com/shopifycloud/app-bridge.js
  • React 19 + React Router 6 SPA inside the admin iframe
  • The button is a direct child of <s-page>:
<s-page heading="#PO-1078" inlineSize="large">
  <s-button slot="secondary-actions" tone="critical" commandFor="po-delete" command="--show">Delete</s-button>
  <s-button slot="secondary-actions" commandFor="po-more-actions-menu">More actions</s-button>
  <s-button slot="primary-action" variant="primary" onClick={handleMarkOrderedClick}>Mark as ordered</s-button>
  ...
</s-page>

Steps the merchant takes

  1. Open the app’s list page from the admin sidebar
  2. Click the list page’s primary action (client-side navigation to the create form)
  3. Fill the form and save (client-side navigation to the saved record, same <s-page> component, the primary action above is now rendered)
  4. Click “Mark as ordered” in the title bar

Result: nothing. The title bar draws the button as enabled and clickable, the click is swallowed. In one of the three occurrences she refreshed the page and it still did nothing. Each time, opening DevTools and switching to the mobile viewport made the very next click work, and the record went through normally.

What I have checked

  • The record is valid server-side. Once the click gets through, the request succeeds first time.
  • My handler cannot be silently failing: every branch either shows a banner on the page or issues the request. Neither happened.
  • Reading app-bridge.js, the title bar is built from s-page > s-button[slot="primary-action"], the element is hidden with display: none, and a click in the admin title bar comes back into the iframe as TitleBar.buttons.button.click with the button’s internal id, which App Bridge resolves to the element and calls .click() on. Nothing on the iframe side of that path depends on viewport width, so the click is being lost either in the admin title bar or in that relay.
  • The bulk action on the list page, which is a normal in-iframe button, works for her at any width.

Related threads

Questions

  1. Was the Chrome eventing issue from the first thread fixed in App Bridge, and if so when? The behaviour I am seeing looks like the same bug still present on Windows.
  2. Is there anything in the admin title bar that behaves differently on the desktop layout versus the mobile layout for app primary actions? The viewport switch fixing it is the strongest signal I have.
  3. Is the ref-based addEventListener mitigation from the first thread still the recommended workaround, given it double-fires handlers on a fresh page load?