T
TanStack•5mo ago
yelping-magenta

Need to re-visit unmounted fields in order for the validators to update the errors

Hello! I've encountered a pretty strange behaviour in my form setup. Here's a minimal reproducible example showcasing this issue I'm facing. https://stackblitz.com/edit/vitejs-vite-p3tjgchh?file=src%2Fmain.tsx This form is organised in multiple tabs, and has two submit actions; publish and draft. These two actions have different requirements (schemas). I found that sometimes the form won't let me submit a draft even though it should because it still has some errors of the previous "publish" validation. In order to mitigate this I'm using canSubmitWhenInvalid, but I'm getting a pretty inconsistent behaviour if some of the fields are not mounted on the DOM. Long story short, in order to submit a draft I need to revisit the tabs that had errors in the previous validation cycle. Steps to reproduce: 1- Go to tab 1 (by default the first tab shown will be the second) 2- Try to publish the -empty- article. The validation will fail (as expected). 3- Try to save a draft. Given that an empty article is a valid draft, it should call the saveArticle function, but it doesn't, because it still has some errors of the previous validation. 4- Go back to tab 2 and save a draft. Now, after the "invalid" fields have been revisited it actually submits the form, even though no fields have been touched. In order to see if this was an issue with tanstack form or not I recreated the exact same scenario with react-hook-form, and it works much more like I'd expect. RHF implementation: https://stackblitz.com/edit/vitejs-vite-248nogko?file=src%2Fmain.tsx Is this a known issue?
Òscar Domingo Martínez
StackBlitz
Tanstack form - Tabs - StackBlitz
Next generation frontend tooling. It's fast!
Òscar Domingo Martínez
StackBlitz
ReactHookForm - Tabs - StackBlitz
Next generation frontend tooling. It's fast!
2 Replies
equal-aqua
equal-aqua•5mo ago
Not entirely sure why this happens. For a temporary fix until we know why, you can add this before your form.handleSubmit(): 
  const handleSubmitArticle = React.useCallback(async (action: FormAction) => {
    form.setFieldValue('action', action);
    form.validate('submit'); // this is the new line
    await form.handleSubmit();
  }, []);
  const handleSubmitArticle = React.useCallback(async (action: FormAction) => {
    form.setFieldValue('action', action);
    form.validate('submit'); // this is the new line
    await form.handleSubmit();
  }, []);
yelping-magenta
yelping-magentaOP•5mo ago
Alright thankss! I'll try to dig a bit deeper into it and see if I can find a fix for what's causing this 🙌

Did you find this page helpful?