Changing a field value and submitting the form in a onClick handler

[freeman]

I am trying to drive server-side pagination as a form with GET method.

Each pagination link has an onClick handler where I do something like that:

// form comes from useForm hook
form.update({
  name: fields.page.name,
  value: 5
});
// submit comes from remix useSubmit hook
// formRef is a useRef attached to the <Form> tag
submit(formRef.current);

The first click on the link does nothing but the second one is working...

Any idea what I am doing wrong ?

I suspect some kind of race condition between form.update and submit.

Is there a conform native way of triggering form submission from a handler ?

[edmundhung]

It's because React batches all the updates in a callback and the changes you made is not rendered on the UI yet. Wrapping the form.update() call in flushSync should solve your issue.

[freeman]

thanks it works perfectly.

Would it make sense to have some kind of callback functionality on form.update (or it returning a promise) instead of having to use the flushSync escape hatch ?

[QzCurious]

TIL form.update, but is not documented? And if there have a guide about updating data before submit / validation would be super.

[QzCurious]

Sorry, I've found doc about form.update on Intent button.