secure-lavender

I need helps with @tanstack/svelte-form. How should I implement confirmation dialog for a dirty form

I need window.confirm to show when leaving the form with unsaved changes. The picture my is the code snippet, can you check that something was wrong?

18 Replies

fascinating-indigo•5mo ago

what is the value of isDirty in beforeNavigate? Did it properly update, or does it stay 'stuck' at false?

secure-lavenderOP•5mo ago

Wait? How does it stay at false? I don't get it Or the state need to be reactive?

fascinating-indigo•5mo ago

I'm asking if it is staying at false or not. Can you log its state to the console?

secure-lavenderOP•5mo ago

In a sec Yes? Somehow, it always set to false?

fascinating-indigo•5mo ago

How weird. I assumed that svelte would access that value at the time it's called, but maybe it tries to store it somehow. Try using a reactive version as test (from the Reactivity docs):

  const isDirty = form.useStore((state) => state.isDirty)

// ...
beforeNavigate(() => {
  console.log(isDirty) // is this still stuck to 'false'?
  // ...
})

  const isDirty = form.useStore((state) => state.isDirty)

// ...
beforeNavigate(() => {
  console.log(isDirty) // is this still stuck to 'false'?
  // ...
})

this causes rerenders, so I wouldn't call it the final solution. Still, it's worth a try to determine what's going on

secure-lavenderOP•5mo ago

Okay then? Lemme try Oh it worked? Thanks I thought the error was the window.confirm instead

fascinating-indigo•5mo ago

I'm almost exclusively a React guy, so I can't confirm why Svelte behaves this way yet. I'll look into it and get back to you though! This solution will trigger one rerender as soon as a field has been changed. After that, it stays true since TanStack Form uses persistent dirty as model. Hopefully that's okay

secure-lavenderOP•5mo ago

Somehow, somehow, I added the const isDirty = form.useStore((state) => state.isDirty) And it just works Weird behaviour But maybe that should be the best way to have the state Thank you so much How should I close this thread?

fascinating-indigo•5mo ago

it'll close on its own after inactivity, or you can right click and click "Close Post"

secure-lavenderOP•5mo ago

Oh okay Thanks again I'm moving away from React to Svelte But I love TanStack tools so much

fascinating-indigo•5mo ago

I've always wanted to try it, I just haven't had the time your issue happened in SvelteKit, right?

secure-lavenderOP•5mo ago

I'm migrating most of it to Svelte Yup

fascinating-indigo•5mo ago

noted! If I learn why it happens, I'll let you know

secure-lavenderOP•5mo ago

Passionate maintainer. Love your grind and vibe

fascinating-indigo•5mo ago

in hindsight, it's obvious now. form.state is a getter. You generated a new object and assigned it to a variable state. Of course it will never update that way. You can avoid that by simply using form.state.isDirty

fascinating-indigo•5mo ago

https://stackblitz.com/edit/sveltejs-kit-template-default-rdwp4egs?file=src%2Froutes%2Fabout%2F%2Bpage.svelte here's an example of it working as expected

LeCarbonator

StackBlitz

SvelteKit Default Template - StackBlitz

The default SvelteKit template, generated with create-svelte

secure-lavenderOP•5mo ago

So I don’t need to useStore anymore?

fascinating-indigo•5mo ago

if you don‘t destructure state, yes

Gaming

Programming

I need helps with @tanstack/svelte-form. How should I implement confirmation dialog for a dirty form

Did you find this page helpful?