fix(qwik-router): submit() always rejects on abort; submitcompleted carries detail.aborted

The rejection closes failures-look-like-successes for SubmitEvent-based
submissions (patch). submitcompleted now also fires on aborts with the
error on detail.aborted (minor).

Author: maiieul

.changeset/submit-rejects-on-abort.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/router': patch
+---
+
+`action.submit()`/`run()` now always rejects when the submission aborts (a thrown `error()` or unexpected server error) — previously a `SubmitEvent`-based submission resolved with an empty result, letting failures look like successes. `<Form>` handles the rejection internally.

.changeset/submitcompleted-aborted-detail.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/router': minor
+---
+
+feat: `submitcompleted` now also fires when a `<Form>` submission aborts, with the error on `detail.aborted`.

e2e/qwik-e2e/apps/qwikrouter-test/src/routes/(common)/actions/abort/index.tsx

@@ -34,7 +34,9 @@ export default component$(() => {
       <Form
         action={action}
         onSubmitCompleted$={(ev) => {
-          formDetail.value = `completed:${ev.detail.status}`;
+          formDetail.value = ev.detail.aborted
+            ? `aborted:${ev.detail.aborted.status}`
+            : `completed:${ev.detail.status}`;
         }}
       >
         <input type="hidden" name="boom" value="1" />

e2e/qwik-e2e/tests/qwikrouter/actions.e2e.ts

@@ -190,9 +190,9 @@ test.describe('action abort semantics (spa)', () => {
     await expect(page.locator('#abort-state')).toHaveText('false:undefined:undefined:false');
   });
 
-  test('submitcompleted does not fire when the submission aborts', async ({ page }) => {
+  test('submitcompleted fires with detail.aborted when the submission aborts', async ({ page }) => {
     await page.locator('#abort-form-submit').click();
+    await expect(page.locator('#abort-form-detail')).toHaveText('aborted:418');
     await expect(page.locator('#abort-state')).toHaveText('false:undefined:undefined:false');
-    await expect(page.locator('#abort-form-detail')).toHaveText('none');
   });
 });

packages/docs/src/routes/api/qwik-router/api.json

@@ -334,7 +334,7 @@
         }
       ],
       "kind": "Interface",
-      "content": "```typescript\nexport interface FormSubmitCompletedDetail<T, ERROR = unknown> \n```\n\n\n<table><thead><tr><th>\n\nProperty\n\n\n</th><th>\n\nModifiers\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\nerror\n\n\n</td><td>\n\n\n</td><td>\n\n[ServerError](#servererror-variable)<!-- -->&lt;ERROR&gt; \\| undefined\n\n\n</td><td>\n\nThe `ServerError` from a returned `fail()` or a failed validator.\n\n\n</td></tr>\n<tr><td>\n\nstatus\n\n\n</td><td>\n\n\n</td><td>\n\nnumber\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\nvalue\n\n\n</td><td>\n\n\n</td><td>\n\nT \\| undefined\n\n\n</td><td>\n\nThe action's successful return value. `undefined` when the action failed or aborted.\n\n\n</td></tr>\n</tbody></table>",
+      "content": "```typescript\nexport interface FormSubmitCompletedDetail<T, ERROR = unknown> \n```\n\n\n<table><thead><tr><th>\n\nProperty\n\n\n</th><th>\n\nModifiers\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\naborted?\n\n\n</td><td>\n\n\n</td><td>\n\n[ServerError](#servererror-variable)\n\n\n</td><td>\n\n_(Optional)_ Set when the submission aborted (a thrown `error()` or an unexpected server error).\n\n\n</td></tr>\n<tr><td>\n\nerror\n\n\n</td><td>\n\n\n</td><td>\n\n[ServerError](#servererror-variable)<!-- -->&lt;ERROR&gt; \\| undefined\n\n\n</td><td>\n\nThe `ServerError` from a returned `fail()` or a failed validator.\n\n\n</td></tr>\n<tr><td>\n\nstatus\n\n\n</td><td>\n\n\n</td><td>\n\nnumber\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\nvalue\n\n\n</td><td>\n\n\n</td><td>\n\nT \\| undefined\n\n\n</td><td>\n\nThe action's successful return value. `undefined` when the action failed or aborted.\n\n\n</td></tr>\n</tbody></table>",
       "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/form-component.tsx",
       "mdFile": "router.formsubmitsuccessdetail.md"
     },

packages/docs/src/routes/api/qwik-router/index.mdx

@@ -1010,6 +1010,21 @@ Description
 </th></tr></thead>
 <tbody><tr><td>
 
+aborted?
+
+</td><td>
+
+</td><td>
+
+[ServerError](#servererror-variable)
+
+</td><td>
+
+_(Optional)_ Set when the submission aborted (a thrown `error()` or an unexpected server error).
+
+</td></tr>
+<tr><td>
+
 error
 
 </td><td>

packages/docs/src/routes/docs/(qwikrouter)/action/index.mdx

@@ -439,7 +439,7 @@ export const useDeletePost = routeAction$(
 );
 ```
 
-A thrown `error()` never lands on `action.error`: the action records no state, a programmatic `action.submit()` rejects with the error, and a `<Form>` submission resets without firing `submitcompleted` — use `fail()` for anything the UI should display. Plain (non-`error()`) throws behave like unexpected errors and result in a sanitized 500.
+A thrown `error()` never lands on `action.error`: the action records no state and `action.submit()` rejects with the error. `<Form>` handles the rejection internally and fires `submitcompleted` with `detail.aborted` set — use `fail()` for anything the UI should display. Plain (non-`error()`) throws behave like unexpected errors and result in a sanitized 500.
 
 ## Previous form state
 

packages/qwik-router/src/runtime/src/form-component.tsx

@@ -10,6 +10,8 @@ export interface FormSubmitCompletedDetail<T, ERROR = unknown> {
   value: T | undefined;
   /** The `ServerError` from a returned `fail()` or a failed validator. */
   error: ServerError<ERROR> | undefined;
+  /** Set when the submission aborted (a thrown `error()` or an unexpected server error). */
+  aborted?: ServerError;
 }
 
 /** @public */
@@ -63,7 +65,8 @@ export const Form = <O, I>(
             !reloadDocument
               ? $((evt: SubmitEvent) => {
                   if (!action.submitted) {
-                    return action.submit(evt);
+                    // Swallow our own rejection — submitcompleted is the form's abort channel.
+                    return action.submit(evt).catch(() => {});
                   }
                 })
               : undefined,
@@ -84,7 +87,7 @@ export const Form = <O, I>(
           // Since v2, this fires before the action is executed so it can be prevented
           onSubmit$,
           // action.submit "submitcompleted" event for onSubmitCompleted$ events
-          !reloadDocument ? action.submit : undefined,
+          !reloadDocument ? $((evt: SubmitEvent) => action.submit(evt).catch(() => {})) : undefined,
         ],
         method: 'post',
         ['data-spa-reset']: spaReset ? 'true' : undefined,

packages/qwik-router/src/runtime/src/qwik-router.runtime.api.md

@@ -223,6 +223,7 @@ export interface FormProps<O, I> extends Omit<QwikJSX.IntrinsicElements['form'],
 
 // @public (undocumented)
 export interface FormSubmitSuccessDetail<T, ERROR = unknown> {
+    aborted?: ServerError;
     error: ServerError<ERROR> | undefined;
     // (undocumented)
     status: number;

packages/qwik-router/src/runtime/src/server-functions.ts

@@ -120,8 +120,20 @@ Action.run() can only be called on the browser, for example when a user clicks a
         state.isRunning = false;
         if (aborted) {
           if (form) {
-            // The submission aborted — submitcompleted does not fire.
-            return { status, value: undefined, error: undefined };
+            const detail = {
+              status,
+              value: undefined,
+              error: undefined,
+              aborted,
+            } satisfies FormSubmitCompletedDetail<unknown>;
+            form.dispatchEvent(
+              new CustomEvent('submitcompleted', {
+                bubbles: false,
+                cancelable: false,
+                composed: false,
+                detail: detail,
+              })
+            );
           }
           throw aborted;
         }