Inertia.js v3.7: Cancel Form Submissions In-Flight | Mohamed Said [ ![Mohamed Said](https://cdn.msaied.com/01KT78WE565VEMM3PSNQAAB0MH.png) Mohamed Said Laravel Backend Engineer ](https://msaied.com) [ Home ](https://msaied.com) [ Projects ](https://msaied.com/projects) [ Articles ](https://msaied.com/articles) [ Certificates ](https://msaied.com/certificates) [ Contact ](https://msaied.com#contact-section) [ ](https://github.com/EG-Mohamed) [ Home ](https://msaied.com) [ Projects ](https://msaied.com/projects) [ Articles ](https://msaied.com/articles) [ Certificates ](https://msaied.com/certificates) [ Contact ](https://msaied.com#contact-section) [ home ](https://msaied.com) [ articles ](https://msaied.com/articles) Cancel In-Flight Form Submissions in Inertia.js v3.7 On this page 1. [ cancelOnUnmount: Abort on Navigation or Modal Close ](#cancelonunmount-abort-on-navigation-or-modal-close) 2. [ Exposing cancel Through Slot Props, Ref, and Context ](#exposing-cancel-through-slot-props-ref-and-context) 3. [ usePoll Now Returns a Reactive polling Value ](#usepoll-now-returns-a-reactive-polling-value) 4. [ Once Props Survive Instant Visits ](#once-props-survive-instant-visits) 5. [ Async Visits No Longer Cancelled by Navigation ](#async-visits-no-longer-cancelled-by-navigation) 6. [ Bug Fixes ](#bug-fixes) 7. [ Upgrade ](#upgrade) 8. [ Key Takeaways ](#key-takeaways) ![Cancel In-Flight Form Submissions in Inertia.js v3.7](https://cdn.msaied.com/614/56bc221aef2dbb0a68623eee5882333f.png) [ Laravel ](https://msaied.com/articles?category=laravel) [ Open Source ](https://msaied.com/articles?category=open-source) #Inertia.js #Laravel #Vue #React #Svelte #Forms Cancel In-Flight Form Submissions in Inertia.js v3.7 ====================================================== 28 Aug 2026 3 min read ![Mohamed Said](https://cdn.msaied.com/01KT78WE565VEMM3PSNQAAB0MJ.jpg) Mohamed Said Table of contents 1. [ 01 cancelOnUnmount: Abort on Navigation or Modal Close ](#cancelonunmount-abort-on-navigation-or-modal-close) 2. [ 02 Exposing cancel Through Slot Props, Ref, and Context ](#exposing-cancel-through-slot-props-ref-and-context) 3. [ 03 usePoll Now Returns a Reactive polling Value ](#usepoll-now-returns-a-reactive-polling-value) 4. [ 04 Once Props Survive Instant Visits ](#once-props-survive-instant-visits) 5. [ 05 Async Visits No Longer Cancelled by Navigation ](#async-visits-no-longer-cancelled-by-navigation) 6. [ 06 Bug Fixes ](#bug-fixes) 7. [ 07 Upgrade ](#upgrade) 8. [ 08 Key Takeaways ](#key-takeaways) Inertia.js v3.7.0 ships two targeted additions to the `` component that give you real control over in-flight submissions, plus a handful of quality-of-life improvements and bug fixes across all three adapters (Vue, React, Svelte). cancelOnUnmount: Abort on Navigation or Modal Close --------------------------------------------------- An in-flight upload does not stop just because the user closes the modal that started it. Navigation cancels requests as a side effect of the next sync request interrupting the previous one, but closing a modal interrupts nothing — the server still receives and processes the file. The new `cancelOnUnmount` attribute fixes this: ```xml Upload ``` When the form unmounts, the request is aborted. The attribute defaults to `false`, so existing forms keep their current behavior. Importantly, a submission that already succeeded is left alone — the cancel token becomes a no-op once the response has arrived, preventing a spurious `onCancel` event from firing after `onSuccess`. Exposing cancel Through Slot Props, Ref, and Context ---------------------------------------------------- The `` component has always used `useForm()` internally, but never surfaced its `cancel` method. v3.7 changes that. `cancel` is now available through the slot props (Vue), render prop (React), component ref, and form context: **Vue** ```xml Upload Cancel ``` **React** ```javascript {({ processing, cancel }) => ( Upload {processing && ( Cancel )} )} ``` usePoll Now Returns a Reactive polling Value -------------------------------------------- Previously, `usePoll` returned only `start` and `stop`, forcing you to maintain your own boolean to track polling state. The hook now returns a reactive `polling` value: ```javascript import { usePoll } from '@inertiajs/vue3' const { start, stop, polling } = usePoll(2000) ``` ```xml Pause updates Resume updates ``` `polling` reflects whether the poll is running, not whether a request is in flight. In Vue it is a `Ref`, in React it is `useState`, and in Svelte it uses `$state`. **Svelte users:** keep the returned object and read `poll.polling` — destructuring loses reactivity. Once Props Survive Instant Visits --------------------------------- Once props are resolved once and cached on the client. Instant visits swap in a placeholder page immediately while the real request runs in the background. Previously, the placeholder dropped both the once prop's value and its registry entry, causing the prop to come back empty. The router now copies remembered once props onto the placeholder page before the swap, unless the visit provides its own value for that prop. Async Visits No Longer Cancelled by Navigation ---------------------------------------------- Inertia's navigation cancellation was too broad — it cancelled all in-flight requests, including explicit async visits targeting other pages. Cancellation now matches on the request's origin and path, so only requests aimed at the page being navigated away from are cancelled. Deferred props, partial reloads, and polls still cancel as expected. Bug Fixes --------- - **React `back_forward` restore**: Tab duplication no longer leaves `usePage()` stuck on stale props. - **`replaceProp()` identity**: Path-aware immutable updates replace the previous deep clone, avoiding unnecessary re-renders of memoized components. - **`` unmount crash**: `getFormData` now returns an empty `FormData` when the form element is gone, preventing a `TypeError` from `startTransition`. Upgrade ------- ```bash npm install @inertiajs/vue3@^3.7.0 # or @inertiajs/react, @inertiajs/svelte ``` Key Takeaways ------------- - Add `cancel-on-unmount` to any `` where an abandoned submission should not reach the server. - Use the `cancel` slot prop to render a cancel button on large uploads without any extra state. - Destructure `polling` from `usePoll` instead of tracking it yourself — but in Svelte, keep the full object. - Once props and instant visits now work correctly together. - Async visits to other pages survive navigation without being cancelled. --- *Source: [Cancel In-Flight Form Submissions in Inertia.js v3.7 — Laravel News](https://laravel-news.com/inertia-3-7-0)* Found this useful? [ ](https://twitter.com/intent/tweet?url=https%3A%2F%2Fmsaied.com%2Farticles%2Fcancel-in-flight-form-submissions-in-inertiajs-v37&text=Cancel+In-Flight+Form+Submissions+in+Inertia.js+v3.7) [ ](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fmsaied.com%2Farticles%2Fcancel-in-flight-form-submissions-in-inertiajs-v37) Frequently Asked Questions ---------------------------- 3 questions Q01 What does cancelOnUnmount do in Inertia.js v3.7? When added to a `<Form>` component, `cancelOnUnmount` aborts the in-flight HTTP request as soon as the form unmounts — for example, when a modal is closed. It defaults to `false` so existing forms are unaffected, and it is a no-op if the response has already arrived. Q02 How do I add a cancel button to an Inertia Form component? In v3.7, `cancel` is exposed through the slot props (Vue), render prop (React), component ref, and form context. In Vue, use `v-slot="{ processing, cancel }"` and bind `cancel` to a button's click handler. In React, destructure it from the render prop function. Q03 Why does usePoll in Svelte lose reactivity when destructured? The Svelte adapter moved `usePoll` to a `.svelte.ts` file and backs the `polling` value with `$state`. Destructuring a `$state`-backed object breaks the reactive binding. Keep the full object returned by `usePoll` and read `poll.polling` to retain reactivity. Continue reading More Articles --------------- [ View all ](https://msaied.com/articles) [ ![Laravel 12: New Features, Helpers, and Practical Upgrade Notes](https://cdn.msaied.com/613/3ae9f2d6a41ea381d43aeed4c462ae97.png) laravel laravel-12 upgrade ### Laravel 12: New Features, Helpers, and Practical Upgrade Notes Laravel 12 ships with streamlined application scaffolding, first-class support for typed route model binding i... ![Mohamed Said](https://cdn.msaied.com/01KT78WE565VEMM3PSNQAAB0MJ.jpg) Mohamed Said 31 Aug 2026 3 min read Read ](https://msaied.com/articles/laravel-12-new-features-helpers-and-practical-upgrade-notes-2) [ ![Laravel Octane + FrankenPHP: Persistent Services, Shared State, and Safe Singletons](https://cdn.msaied.com/612/2bd17daafd0c48a0aa824a6d744fb403.png) laravel octane frankenphp ### Laravel Octane + FrankenPHP: Persistent Services, Shared State, and Safe Singletons Running Laravel under FrankenPHP workers means your service container lives across requests. Learn which singl... ![Mohamed Said](https://cdn.msaied.com/01KT78WE565VEMM3PSNQAAB0MJ.jpg) Mohamed Said 31 Aug 2026 4 min read Read ](https://msaied.com/articles/laravel-octane-frankenphp-persistent-services-shared-state-and-safe-singletons) [ ![Filament v3 Custom Table Columns: Rendering Complex UI Without Hacks](https://cdn.msaied.com/611/05db05ad084cfdd9a407ff7707dcfaf7.png) filament laravel livewire ### Filament v3 Custom Table Columns: Rendering Complex UI Without Hacks Learn how to build fully custom Filament v3 table columns with Blade views, state callbacks, and Alpine.js — w... ![Mohamed Said](https://cdn.msaied.com/01KT78WE565VEMM3PSNQAAB0MJ.jpg) Mohamed Said 30 Aug 2026 3 min read Read ](https://msaied.com/articles/filament-v3-custom-table-columns-rendering-complex-ui-without-hacks) [ ![Mohamed Said](https://cdn.msaied.com/01KT78WE565VEMM3PSNQAAB0MH.png) Mohamed Said Laravel Backend Engineer ](https://msaied.com)Senior Backend Engineer specializing in Laravel, scalable SaaS platforms, APIs, and cloud infrastructure. I build secure, high-performance web applications that help businesses grow. Explore - [Home](https://msaied.com) - [Projects](https://msaied.com/projects) - [Articles](https://msaied.com/articles) - [Certificates](https://msaied.com/certificates) - [Contact](https://msaied.com#contact-section) Connect - [ hello@msaied.com ](mailto:hello@msaied.com) - [ +20 109 461 9204 ](tel:+201094619204) © 2026 Mohamed Said. All rights reserved. [ ](https://github.com/EG-Mohamed) [ ](https://www.linkedin.com/in/msaiedm/) [ ](https://wa.me/201094619204) [ ](mailto:hello@msaied.com) [ ](https://drive.google.com/file/u/0/d/1MF20IPRJyzfy32mhEutjL5EpSls0w2Q8/view)