Remote form() result persists after navigation #14802

Activity

1. dummdidumm

   added the

   Bug

   issue type on Oct 24, 2025
2. sillvva commented on Oct 25, 2025

   

   sillvva

   on Oct 25, 2025

   Last edited by sillvva

   Contributor

   More actions

   @dummdidumm I think the issue here is that the way remote form works is you're importing an instance of a remote form rather than a function that creates a new instance. Since the import is cached in memory even as you navigate around, the values in that instance are retained.

   If it were a function that you call to create an instance, it would create a new instance each time the page is loaded and only the function would be cached in memory.

   So instead of:

   <script lang="ts">
     import { todoForm } from "./form.remote.ts";
   </script>
   
   <form {...todoForm}> <!-- same instance every time -->
     ...
   </form>

   It should be:

   <script lang="ts">
     import { todoForm } from "./form.remote.ts";
     const form = todoForm(); // creates new instance every time
   </script>
   
   <form {...form}>
     ...
   </form>

   I tested this out with a local copy of sveltekit and it seemed to work, although I was unable to get the types and .remote.ts export limitation working correctly.
3. iatrophobic commented on Oct 25, 2025

   

   iatrophobic

   on Oct 25, 2025

   More actions

   I have a remote form wrapper component that lets me easily pass custom on success, error, etc...hooks to a custom enhance function and was going crazy thinking I was doing something wrong lol. Same bug noticed here running kit v2.43.2
4. sillvva commented on Oct 25, 2025

   

   sillvva

   on Oct 25, 2025

   Contributor

   More actions

   This is also a temporary workaround that I'm using. Using a unique form id with .for() creates a new instance on each page load. .for() has a built-in feature to delete the current instance when unmounted.

   Ultimately, though, I think making it a function would be a better DX.

   

   👍React with 👍2Reacted by Hyunbin Seo and Tee Ming
5. mquandalle commented on Oct 25, 2025

   

   mquandalle

   on Oct 25, 2025

   Last edited by mquandalle

   Author

   More actions

   If the goal is to keep the existing API without instanciating a new form on each page, maybe onNavigate could be used to reset the form (but I don't know if it runs if we stay on the same page but add for instance a query parameter to the url, which would be unwanted)
6. sillvva commented on Oct 25, 2025

   

   sillvva

   on Oct 25, 2025

   Last edited by sillvva

   Contributor

   More actions

   With a function, you could still cache a form instance to get the current behavior by exporting the instance from a module instead of calling it directly from the page/component.

   // $lib/remote/forms.ts
   import { todoForm } from './forms.remote.ts';
   
   export const cachedTodoForm = todoForm();

   There's also PR #14779 awaiting approval to add the ability to programmatically reset the state(s) of a form instance.
7. Coretteket

   added a commit that references this issue on Dec 16, 2025

   fix: workaround sveltejs/kit#14802

   46d6521
8. hyunbinseo commented on Dec 26, 2025

   

   hyunbinseo

   on Dec 26, 2025

   Last edited by hyunbinseo

   Contributor

   More actions

   @sillvva Thank you for the workaround!

   So SvelteKit remote form allows multiple instances of a form:

   you can create separate instances of a form function via for(id)

   {#each await getTodos() as todo}
     {@const modify = modifyTodo.for(todo.id)}
     <form {...modify}>

   However, this doesn't have to happen inside an each loop.

   Before

   <script>
     import { PublicSendCodeSchema } from '.';
     import { sendCode } from './index.remote';
   </script>
   
   <form {...sendCode.preflight(PublicSendCodeSchema)}></form>

   After

   $props.id() seems to work.

   <!-- src\routes\login\+page.svelte -->
   
   <script>
     import { PublicSendCodeSchema } from '.';
     import { sendCode as _sendCode } from './index.remote';
   
     const uid = $props.id();
   
     const sendCode = _sendCode.for(uid);
   </script>
   
   <form {...sendCode.preflight(PublicSendCodeSchema)}></form>

   Note

   I would love to create a new instance by default.

   Login page persisting after (login → log out with login page redirect) was not intuitive.
9. Coretteket

   added a commit that references this issue on Dec 27, 2025

   fix: workaround sveltejs/kit#14802

   b996cd1
10. akqira commented on Feb 15, 2026

    

    akqira

    on Feb 15, 2026

    Last edited by akqira

    More actions

    Hi,
    I faced the same situation this week. Thanks @sillvva for your workaround using .for()
    A bit disappointed and then frustrated to have such behavior (issues persisting even after navigating to another route and trying back).
    So solution was to use :

    {@const myForm = addLibraryItem.for(Math.random().toString(36).substring(2, 15))}

    I don't know if it affect the memory/cache but for now, each time the user will add an entry via this remote function a new form will be used. If user refresh the page then all is reset correctly

    Waiting for your PR @sillvva 🥇
11. teemingc

    added

    formsStuff relating to forms and form actionsStuff relating to forms and form actions

    on Feb 17, 2026
12. Coretteket

    added a commit that references this issue on Feb 19, 2026

    fix: workaround sveltejs/kit#14802

    8937599