onSubmit not available, can't use server-side validation and <Confirmation /> together

[newfylox]

When using react-admin V3, we had a hook on the handleSubmit. Now that it's removed in V4, I can't figure how to use server-side validation and <Confirmation /> component together. Should your onSubmit be available to use?

Because Server-side validation needs to give a "save" function to SimpleForm using onSubmit. But When using <Confirmation />, there's no way from there to use your onSubmit implementation to call it if the user confirms the prompt.

So mixing both seems impossible.

[antoinefricker]

Thanks for your report. At first glance, we can not provide a providential solution 🤔 - this need a bit of digging and grinding... Would you mind building a small demo using the CodeSandbox forked from simple example V4?

[newfylox]

Update

For now I'm using 2 save buttons. The "real" one from React-Admin SaveButton and another one, a regular button hidden <button hidden ref={(ref) => setButtonRef(ref)} type="submit" />. When clicking the real one, onClick calls preventDefault on the event object. Then if the user accepts the confirmation, it triggers the hidden one, submitting the form as default buttonRef.click();

However, using this solution makes the server-side validation working, but breaks the default behaviors like showing a successful message and redirect to the list page. I guess the best solution would be point number 3 or having access to formHandleSubmit easily or even better, having new options

Original

There's 3 ways I'm seeing to solve this but none of them seems the best way

1. Have access to <SimpleForm> ref and later in the confirmation call something like formRef.current.submit() but trying to inject a reference to it seems to return a null reference
2. Similar to previous point, in the confirmation handleClick from the <SaveButton onclick={handleClick}>, call event.preventDefault() from the event object and save it somewhere, then when the user confirms, retrieve the saved event object and "continue" its propagation (still don't know how, or retrieve element DOM <SimpleForm> by id or class and call submit event
3. Instead of passing onSubmit={save} to <SimpleForm> to make a server validation, onError in mutationOptions in both <SimpleForm> or <SaveButton> could only be implemented (so keeping the default onSubmit behavior) and then return errors, so that we could create a save function as explained, but call that save(useForm().getValues()) inside the confirmation dialog without passing it to the form and let onError return the errors and show field errors.

Or, formHandleSubmit from https://github.com/marmelab/react-admin/blob/master/packages/ra-core/src/form/useAugmentedForm.ts#L139 could be available without having to use useAugmentedForm because it has already been correctly build with proper props, and so it could be return from a useEditController (or else) when fetched here https://github.com/marmelab/react-admin/blob/master/packages/ra-core/src/form/Form.tsx#L44

But the better way would be a simple solution when mixing server-side validation and <Confirmation />

[WiXSL]

Maybe this resent PR #8199 could help you when the next react-admin version gets released.

See https://github.com/react-hook-form/react-hook-form/issues/5494#issuecomment-855224219

Plus, maybe we should document this a little bit better also.

[jashwant]

@newfylox Did you find a better way?

[newfylox]

@jashwant unfortunately no, I did work on my project since a couple of week... but soon I'll have to come back to update code and I'll try to see if I can better refactor it.

[slax57]

Coming back to this issue while doing some triage. To me, this is something react-admin does not (yet?) support, but this is not a bug. Hence I'll relabel this issue as enhancement. If anyone wants to open a PR to provide (or at least discuss) a solution to this issue, we would certainly welcome it.