Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SaveButton transform options not working as expected #9889

Closed
jeromediaz opened this issue May 30, 2024 · 3 comments · Fixed by #9915
Closed

SaveButton transform options not working as expected #9889

jeromediaz opened this issue May 30, 2024 · 3 comments · Fixed by #9915

Comments

@jeromediaz
Copy link

According to the documentation
https://marmelab.com/react-admin/SaveButton.html#transform

a SaveButton with the default type "submit" should be able to use a transform callback to transform the data before sending it.
<SaveButton transform={transformUser} />

In reality trying to use this property only result on a warning and no data transformation, which is confirmed by the the source code

warning( type === 'submit' && ((mutationOptions && (mutationOptions.onSuccess || mutationOptions.onError)) || transform), 'Cannot use <SaveButton mutationOptions> props on a button of type "submit". To override the default mutation options on a particular save button, set the <SaveButton type="button"> prop, or set mutationOptions in the main view component (<Create> or <Edit>).' );

https://github.com/marmelab/react-admin/blob/master/packages/ra-ui-materialui/src/button/SaveButton.tsx

I think either the code or the documentation should be updated

@fzaninotto
Copy link
Member

The <SaveButton transform> prop is working in the simple example Post Create page.

https://stackblitz.com/github/marmelab/react-admin/tree/master/examples/simple?file=src%2Fposts%2FPostCreate.tsx%3AL84

Please provide a reproduction for the issue you report.

And by the way, we wrote an issue template so that we have enough details to investigate. You saw that template when you created a new issue. If you don't follow it, we'll close the issue.

@jeromediaz
Copy link
Author

What you were expecting:
I expect the SaveButton transform option to be usable even without specifying a type="button".

It isn't specified in the documentation transform option is available only for SaveButton with type button
(https://marmelab.com/react-admin/SaveButton.html#transform) like it is for mutationOptions

What happened instead:
Using the "submit" SaveButton with the transform option result in the transform callback not being called and a warning being visible in the console

Cannot use <SaveButton mutationOptions> props on a button of type "submit". To override the default mutation options on a particular save button, set the <SaveButton type="button"> prop, or set mutationOptions in the main view component (<Create> or <Edit>).

Steps to reproduce:
Simply try to use the code provided in the documentation, where no type="button" is set

  const transformUser = data => ({
      ...data,
      fullName: `${data.firstName} ${data.lastName}`
  });

  const UserCreateToolbar = () => (
      <Toolbar>
          <SaveButton transform={transformUser} />
      </Toolbar>
  );

Related code:

Other information:
What I suggest if to update the documentation (https://marmelab.com/react-admin/SaveButton.html#transform) to reflect the need to use a SaveButton type="button" if we want to be able to use the transform option

Environment

  • React-admin version: 4.16.16
  • Last version that did not exhibit the issue (if applicable):
  • React version: 18.3.1
  • Browser: Safari
  • Stack trace (in case of a JS error):

@slax57
Copy link
Contributor

slax57 commented Jun 11, 2024

Indeed this seems like a documentation issue. Thanks for the report.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants