How to programmatically show Save Bar inside <s-app-window> without using <form data-save-bar>?

Shopify Apps
1

Hello everyone,

I’m trying to display the Save Bar inside <s-app-window> based on a manually tracked dirty state, but I haven’t been able to get it to show.

In my case, I’m not using <form data-save-bar> to detect changes. Instead, I’m managing the dirty state separately in React state. When the state becomes dirty, I want to show the Save Bar programmatically.

However, I can’t find any official documentation explaining how to trigger the Save Bar without using a form. The Shopify docs only show examples using <form data-save-bar>, which doesn’t fit my use case.

I’ve already tried:

  • Using SaveBar from App Bridge

  • Using <ui-save-bar>

  • Dispatching events programmatically

None of these approaches worked.

For context:

  • I’m using the latest Shopify app template

  • Built with React Router 7

  • Using Shopify Web Components (<s-app-window> etc.)

Is there a recommended or supported way to programmatically control the Save Bar when managing dirty state manually?

Any guidance would be greatly appreciated — I’m currently stuck on this step.

Thanks in advance!

2

hii @RayleighCode

The Save Bar is intentionally tied to and Shopify’s automatic change detection. App Bridge SaveBar or custom events won’t reliably work in this setup.

Right now, the supported approach is to wrap your inputs in ` even if you manage state in React), or build your own custom save UI.
Thanks

3

Thanks for the clarification.

I’ve noticed something interesting:

The App Bridge SaveBar does work on normal routes, but it doesn’t appear when used inside <s-app-window>. That’s what’s confusing me.

So currently it seems like:

  • <form data-save-bar> → Works inside <s-app-window>

  • App Bridge SaveBar → Works on regular routes

  • App Bridge SaveBar → Does not work inside <s-app-window>

Is this an intentional limitation of <s-app-window>?
Or is there a specific way the Save Bar needs to be triggered when using Web Components?

I also have another question regarding the suggested approach of wrapping everything inside <form data-save-bar>.

In my case, not all changes come directly from inputs. For example, sometimes I update state programmatically (e.g., adding/removing items from an array, updating objects, etc.). These changes are not always tied to a direct input event.

In that scenario, how can I inform the form that the state is now “dirty” so that the Save Bar appears? Is there a supported way to manually mark the form as changed when the update doesn’t originate from an input element?

I’d really appreciate clarification on both points — especially how Shopify expects complex React state updates to integrate with <form data-save-bar>.

Thanks again :folded_hands:

4

Another half-baked Polaris component :face_vomiting: