S-choice-list Does Not Reset Form Dirty State with data-save-bar

Built for Shopify
1

Hi Shopify Community,

We are facing an issue with the data-save-bar functionality when using the s-choice-list component inside a form.

Setup

We are using a standard HTML form with the data-save-bar attribute:

<form data-save-bar>
  ...
</form>`

Inside the form, we are using the s-choice-list component.

Issue

The save bar behavior is not working correctly with s-choice-list.

Steps to Reproduce

  1. Open the form with already saved values.
  2. Change the s-choice-list selection.
  3. The save bar appears correctly because the form becomes dirty.
  4. Re-select the original saved value (so the form matches the initial saved state again).

Expected Behavior

The save bar should disappear because the form is no longer dirty and all values match the original saved state.

Actual Behavior

The save bar remains visible even after reverting back to the original saved value.

Additional Notes

  • This issue is currently impacting our Built for Shopify (BFS) requirements and validations.

Has anyone else faced this issue with s-choice-list and data-save-bar dirty state detection?
Any workaround or recommended approach would be greatly appreciated.

Thanks!

2

Instead of relying on the automatic dirty state detection from data-save-bar, you can manually manage the save bar visibility using the global shopify.saveBar API.

We are using this approach in our applications because some components like s-choice-list do not always reset the form dirty state correctly when reverting back to the original value.

Our Implementation looks like this:

const saveBarId = "settings-save-bar";

useEffect(() => {
  if (!shopify) return;

  if (config?.isDirty) {
    shopify.saveBar.show(saveBarId);
  } else {
    shopify.saveBar.hide(saveBarId);
  }
}, [shopify, config?.isDirty]);

<ui-save-bar id={saveBarId}>
  <button variant="primary" onClick={handleSave}>
    Save
  </button>

  <button onClick={handleDiscard}>
    Discard
  </button>
</ui-save-bar>

With this approach, you fully control the dirty state logic on your side instead of depending on the automatic form tracking from data-save-bar.

This has worked more reliably for us, especially for complex components and custom state management scenarios.

3

Here, I’m using the <form data-save-bar></form> inside the Shopify App Bridge web component s-app-window.

The data-save-bar attribute manages the visibility of the close button inside s-app-window. When the form is in a dirty state, it hides the close button to prevent users from closing the s-app-window with unsaved changes. Users must either save or discard the changes before the close button becomes visible again.

4

Hi Shopify team, is there any solution or workaround available for this issue?