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

Allow to keep form validation when using custom save buttons #4458

Merged
merged 19 commits into from
Mar 5, 2020

Conversation

JulienMattiussi
Copy link
Contributor

@JulienMattiussi JulienMattiussi commented Feb 27, 2020

Closes #4295

Issue

Form validation is never performed when using custom save buttons
(doing custom dava provider instead of dfault ra REST call)

Because when we overload handleSubmit or handleSubmitWithRedirect function, the form submission isn't performed

(And react-final-form doesn't offer a simple possibility to perform a form validation without a form submission.)

Solution

Add possibility to overload ra save function without overloading handleSubmit function

Use this

const SaveCustomButton = props => {
    const [create] = useCreate('posts');
    const redirectTo = useRedirect();
    const notify = useNotify();
    const { basePath } = props;

    const handleSave = useCallback(
        (values, redirect) => {
            create(
                {
                    payload: {
                        data: { ...values, average_note: 10 },
                    },
                },
                {
                    onSuccess: ({ data: newRecord }) => {
                        notify('ra.notification.created', 'info', {
                            smart_count: 1,
                        });
                        redirectTo(redirect, basePath, newRecord.id, newRecord);
                    },
                }
            );
        },
        [create, notify, redirectTo, basePath]
    );

    return <SaveButton {...props} onSave={handleSave} />;
};

Instead of this

const SaveCustomButton = props => {
    const [create] = useCreate('posts');
    const redirectTo = useRedirect();
    const notify = useNotify();
    const formState = useFormState();
    const { basePath, redirect } = props;

    const handleClick = useCallback(
        () => {
            create(
                {
                    payload: {
                        data: { ...formState.values, average_note: 10 },
                    },
                },
                {
                    onSuccess: ({ data: newRecord }) => {
                        notify('ra.notification.created', 'info', {
                            smart_count: 1,
                        });
                        redirectTo(redirect, basePath, newRecord.id, newRecord);
                    },
                }
            );
        },
        [formState, redirect, create, notify, redirectTo, basePath]
    );

    return <SaveButton {...props} handleSubmitWithRedirect={handleClick} />;
};

Doc

image

image

@JulienMattiussi JulienMattiussi added the WIP Work In Progress label Feb 27, 2020
Copy link
Member

@fzaninotto fzaninotto left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To be PRed against next instead of master

examples/simple/src/posts/PostCreate.js Outdated Show resolved Hide resolved
packages/ra-core/src/form/FormWithRedirect.tsx Outdated Show resolved Hide resolved
packages/ra-core/src/form/FormWithRedirect.tsx Outdated Show resolved Hide resolved
@JulienMattiussi JulienMattiussi changed the base branch from master to next March 2, 2020 16:48
@JulienMattiussi JulienMattiussi changed the title Fix form validation when using custom save buttons Allow to keep form validation when using custom save buttons Mar 2, 2020
@JulienMattiussi JulienMattiussi added RFR Ready For Review WIP Work In Progress and removed WIP Work In Progress RFR Ready For Review labels Mar 3, 2020
@JulienMattiussi JulienMattiussi added RFR Ready For Review and removed WIP Work In Progress labels Mar 4, 2020
packages/ra-core/src/form/FormWithRedirect.tsx Outdated Show resolved Hide resolved
yarn.lock Outdated Show resolved Hide resolved
@fzaninotto fzaninotto added this to the 3.3.0 milestone Mar 5, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
RFR Ready For Review
Projects
None yet
Development

Successfully merging this pull request may close these issues.

No input validations when submit on toolbar custom actions
2 participants