Issue with Synchronizing Form Data in Inertia.js with Laravel

Issue with Synchronizing Form Data in Inertia.js with Laravel Hi everyone,

I’m running into an issue with synchronizing data across multiple forms on the same page in my Laravel app that uses Inertia.js. I have a collective form component with multiple sub-forms, and I need them to stay in sync after submitting any form. However, I’m facing some issues where the form data doesn’t get updated properly after one form is submitted.

Problem Description: I have a parent component with multiple forms:

<div className="bg-white p-4 shadow sm:rounded-lg sm:p-8 dark:bg-gray-800">
    <EditPhotoRevealForm event={event} />
</div>
<div className="bg-white p-4 shadow sm:rounded-lg sm:p-8 dark:bg-gray-800">
    <EditAppearanceForm event={event} covers={cover_photo} />
</div>

In EditPhotoRevealForm, I am using the useForm() hook from Inertia to handle form data like this:

const EditPhotoRevealForm = ({ event }) => {
    const { data, setData, patch, errors, processing, recentlySuccessful } =
        useForm({
            options: event.options_array
        });

    const submit = (e) => {
        e.preventDefault();

        patch(route('events.update', { event: event.id }), {
            preserveScroll: true,
        });
    };

    return (
        <form onSubmit={submit}>
            {/* Form fields */}
        </form>
    );
};

When I submit a form in EditPhotoRevealForm, the changes are made, but when I submit another form (e.g. EditAppearanceForm), the value of the photo_reveal_option.reveal_photos in current form remains without previous changes after saving EditPhotoRevealForm, and it updates form with invalid (previous) data. It still shows the old value from before the first form submission. I use same route (patch) in all forms. I was trying to set preserveState: false in every subform but it's not working too.

If anyone has faced a similar issue or can point me in the right direction, I’d really appreciate the help!

Sinnbeck

1 year ago

Level 102

I am not 100% sure I understand the issue. But you can try setting the new defaults to the form after submit is successful

const EditPhotoRevealForm = ({ event }) => {
    const { data, setData, patch, errors, processing, recentlySuccessful, setDefaults } =
        useForm({
            options: event.options_array
        });

    const submit = (e) => {
        e.preventDefault();

        patch(route('events.update', { event: event.id }), {
            preserveScroll: true,
            onSuccess: ()  => {
                setDefaults() //tell inertia that this is now the new default state
           }
        });
    };

    return (
        <form onSubmit={submit}>
            {/* Form fields */}
        </form>
    );
};

rusinowiczjakub

1 year ago

Level 1

@Sinnbeck not working :/ as I see, preserveState: false is working, but when i set it to false, with preserveScroll set to true, preserving scroll is not working, and after submiting form view get scrolled to top

const EditAppearanceForm = ({event, covers = null, className}) => {
    // const event = usePage().props.event;

    const {data, setData, reset, post, errors, processing, recentlySuccessful, setDefaults} =
        useForm({
            options: event.options_array,
            cover_photo: null
        });
    const fileInputRef = useRef(null);

    const submit = (e) => {
        e.preventDefault();

        post(route('events.update', {event: event.id}), {
            preserveScroll: true,
            preserveState: false,
            onSuccess: () => {
                reset('cover_photo')
                fileInputRef.current.value = null;
                setDefaults()
            }
        });
    };
...

const EditPhotoRevealForm = ({event, className}) => {
    // const event = usePage().props.event;
    const {data, setData, patch, errors, processing, recentlySuccessful, setDefaults} =
        useForm({
            options: event.options_array
        });

    const submit = (e) => {
        e.preventDefault();

        patch(route('events.update', {event: event.id}), {
            preserveScroll: true,
            preserveState: false,
            onSuccess: () => {
                setDefaults();
            }
        });
    };

And that's my main component:

const EventView = ({event, cover_photo}) => {

return (

                    <div className="bg-white p-4 shadow sm:rounded-lg sm:p-8 dark:bg-gray-800">
                        <EditPhotoRevealForm event={event}/>
                    </div>

                    <div className="bg-white p-4 shadow sm:rounded-lg sm:p-8 dark:bg-gray-800">
                        <EditAppearanceForm event={event} covers={cover_photo}/>
                    </div>
);

I'm not sure if it's because in this subforms i'm updating property of model which is an array:

                    <RadioGroup.Root
                        defaultValue={data?.options.photo_reveal_option.reveal_photos}
                        className="mt-2 max-w-sm w-full flex flex-row gap-3"
                        onValueChange={(v) => setData('options', {
                            ...data.options,
                            ...{
                                photo_reveal_option: {
                                    ...data.options.photo_reveal_option,
                                    reveal_photos: v
                                }
                            }
                        })}

rusinowiczjakub

1 year ago

Level 1

imgur[dot]com[/a/IwC2sA0]

These are 3 steps.

I'm changing value from During Event to Hidden in first form.
Then I'm chaning theme value in second form
After refreshing page, value from first form is switched back to the previous value (During Event)

That means, that second form is sending previous value of options.photo_reveal to the server

Please or to participate in this conversation.