S-form onSubmit isn't awaited before admin block reload

Extensions
1

Example snippet:

import "@shopify/ui-extensions/preact";
import { render } from "preact";

function Example() {
  return (
    <s-admin-block heading="Example">
      <s-form
        onSubmit={async () => {
          console.log(`\n ${new Date().toISOString()} onSubmit`);
          await new Promise((resolve) => setTimeout(resolve, 1000));
          console.log(`\n ${new Date().toISOString()} onSubmit done`);
          throw new Error("Example server validation error");
        }}
      >
        <s-text-field name="example" label="Example"></s-text-field>
      </s-form>
    </s-admin-block>
  );
}

export default async () => {
  render(<Example />, document.body);
};

Video in action:

Note how the “Example” block reloads almost instantly (API version 2026-01). The “onSubmit done” log entry is never printed. Whereas, the “Tracking preferences” block (API version 2025-07) reloads slightly later - only after the changes have been saved.

In my opinion, the current functionality has two major flaws:

  1. From the user’s perspective, server-side validation no longer works. Even if the request fails on the server side, there’s no way to display an error.
  2. The user may see stale data after reload. The request to fetch the data after reload can complete before the update.
2

My bad, I didn’t realise the onSubmit callback now receives the event. Using event.waitUntil(promise) fixes the issue.