App window's save bar doesn't prompt before close, and data-save-bar / button props have gaps

App Bridge
,
1

I’m using to host a complex editor (React + react-hook-form) and trying to wire shopify.saveBar for unsaved-changes UX. I’ve hit three issues I haven’t been able to work around - would appreciate guidance or confirmation if these are known limitations.

Setup

  // inside the s-app-window content route
  <ui-save-bar id="editor-save-bar">
    <button variant="primary" onClick={handlePublish}>Publish</button>
    <button onClick={handleDiscard}>Discard</button>
  </ui-save-bar>

  useEffect(() => {
    if (isDirty) shopify.saveBar.show("editor-save-bar");
    else shopify.saveBar.hide("editor-save-bar");
  }, [isDirty]);

Issue 1 - No leave/close confirmation from the s-app-window

When the save bar is visible (dirty state) and the merchant clicks the app window’s close button, the window closes immediately without prompting. The documented behavior for data-save-bar is to prompt before exit - but the programmatic shopify.saveBar.show() path doesn’t seem to participate in the close flow at all.

Is there an API to register an “about-to-close” handler on , or a way to make the programmatic save bar block the close the way data-save-bar does
for form-based pages?

Issue 2 - data-save-bar isn’t usable when state is set programmatically

The docs recommend data-save-bar on a for automatic dirty tracking. We can’t use it: our form state is managed by react-hook-form, which updates values via setValue() (React state) rather than firing native input/change events on DOM elements. The save bar never detects mutations.

Is there a supported way to manually signal “the form is dirty” to a data-save-bar form (e.g., dispatch a synthetic event, set an attribute), so we can still benefit from the auto leave-confirmation behavior described in Issue 1?

Issue 3 - loading and disabled on buttons inside are ignored

Publish

Neither loading nor disabled has any visible effect on the Save button. Users can spam-click during the publish request. Is there a different prop name, or is this expected and we need to gate clicks in JS only?

Environment

  • App Bridge: latest
  • React 18 + Remix
  • App is embedded in Shopify admin
2

Hi markkkkas - thanks for the reports. We’re looking into this now

3

@markkkkas - I’ve reproduced all three issues and wanted to share what I found:

Issue 1: No “Leave page?” prompt when closing s-app-window

We’re tracking this for a fix. This is definitely a bug, it should prevent closing the window.

Issue 2: data-save-bar doesn’t detect programmatic changes

There is a way to support this: Use a hidden input. Something like:

const [counter, setCounter] = useState(0);
const hiddenInputRef = useRef<HTMLInputElement>(null);

useEffect(() => {
  const input = hiddenInputRef.current;
  if (!input) return;
  
  input.value = String(counter);
}, [counter]);

return (
  <form data-save-bar>
    <input ref={hiddenInputRef} type="hidden" name="dirtyState" defaultValue="0" />
    {/* Rest of form */}
  </form>
);

Issue 3: loading/disabled props on buttons ignored

At the moment we don’t support other props on these buttons, but I have filed an issue for us to look into future support.

Thanks again for reporting these — really helpful details!

4

Hey @Mitch_Lillie , it looks like issue 2 has regressed as this doesn’t seem to work anymore

5

we’re also seeing this popup on chrome when clicking save on the save bar. This issue has regressed multiple times as well now.

image
image804×197 9.51 KB

6

+1 here, prompting to save changes when closing the app window would be a life saver here