Contextual Save Bar dismisses itself on submit even when a network call never fires (validation blocks it)

App Bridge
,
1

Hi all,

We’re building an embedded app using App Bridge’s native Contextual Save Bar via the data-save-bar attribute on our <form> element, e.g.:

<form data-save-bar onSubmit={onSubmit} onReset={handleReset}>
  {/* form fields */}
</form>

The issue:

We run client-side validation on submit. If validation fails, we show an inline error banner and return early — no network request is ever made. The client-side state is untouched (still the edited, unsaved values); nothing goes to the server or the database.

The problem is that the Contextual Save Bar disappears the moment the form’s submit event fires, regardless of what our onSubmit handler does afterward. So from the merchant’s point of view: they click “Save,” the bar vanishes as if the save went through, an error banner appears saying the input is invalid, but no request was ever sent. If they navigate away at that point, App Bridge no longer warns them about unsaved changes — even though their edits were never sent anywhere and would be lost.

What we expected:

Since App Bridge owns the CSB lifecycle when data-save-bar is used, we’d expect either:

  1. A way to tell App Bridge “don’t dismiss the bar / keep leave-confirmation active” when our submit handler bails out before making a request, or
  2. The CSB to dismiss based on some explicit signal from us (e.g. resolving a promise, or an imperative API call) rather than just the native submit event firing on the form.

What we’ve tried:

  • Calling event.preventDefault() at the top of onSubmit before running validation — doesn’t stop App Bridge from dismissing the bar, since it appears to hook into the submit event itself rather than waiting on our handler’s outcome.
  • Looking for a documented way to reset/re-show the save bar after a submit that didn’t actually send a request — haven’t found one for the declarative data-save-bar approach.

Questions:

  • Is there a supported way to keep the Contextual Save Bar (and its “leave without saving” guard) active when onSubmit intentionally short-circuits before any network call, e.g. due to validation failure?
  • Would we need to drop data-save-bar and manage the imperative App Bridge SaveBar API directly to get this level of control over when the bar dismisses?

Any guidance from the Shopify team or others who’ve run into this would be much appreciated. Happy to share more info if useful.

Thanks!