useForm setData not working as expected

[moham96]

Version:

• @inertiajs/react version: 1.0.2

Describe the problem:

Below is an example for the bug/issue,in theory when I change the input1 select to some value other than 0 it should reset the input2 to 0 but what I'm seeing is that it clears the changed input itself input1

Steps to reproduce:

1- run this example using inertiajs/react

import { useForm } from "@inertiajs/react";
const options = [
    { title: "zero", value: 0 },
    { title: "one", value: 1 },
];
function Text() {
    const { setData, data, reset } = useForm<{
        input1: number;
        input2: number;
        input3: number;
    }>({
        input1: 0,
        input2: 0,
        input3: 0,
    });

    console.log({ data });
    return (
        <div>
            <form>
                <div>
                    <label htmlFor="input1">Input1</label>
                    <select
                        id="input1"
                        onChange={(e) => {
                            setData("input1", parseInt(e.target.value));
                            if (parseInt(e.target.value) !== 0) {
                                console.log(
                                    `input1 is set so  reset input2 to 0`
                                );
                                setTimeout(() => {
                                    setData("input2", 0);
                                }, 1000);
                            }
                        }}
                        value={data.input1}
                    >
                        {options.map((option, index) => (
                            <option key={index} value={option.value}>
                                {option.title}
                            </option>
                        ))}
                    </select>
                </div>
                <div>
                    <label htmlFor="input2">Input2</label>
                    <select
                        id="input2"
                        onChange={(e) => {
                            setData("input2", parseInt(e.target.value));
                            if (parseInt(e.target.value) !== 0) {
                                console.log(
                                    `input2 is set so  reset input1 to 0`
                                );

                                setTimeout(() => {
                                    reset("input1");
                                }, 1000);
                            }
                        }}
                        value={data.input2}
                    >
                        {options.map((option, index) => (
                            <option key={index} value={option.value}>
                                {option.title}
                            </option>
                        ))}
                    </select>
                </div>
                <div>
                    <label htmlFor="input3">Input3</label>
                    <select
                        id="input3"
                        onChange={(e) => {
                            setData("input3", parseInt(e.target.value));
                        }}
                        value={data.input3}
                    >
                        {options.map((option, index) => (
                            <option key={index} value={option.value}>
                                {option.title}
                            </option>
                        ))}
                    </select>
                </div>
            </form>
        </div>
    );
}
export default Text;

2- in the browser change the select of input1 to one you will notice that it does set the input to 1 but after the timeout that I have 1000ms it will reset the input itself and not the input2 as it's supposed to do

Is there a bug in my code or in inertiajs?

[moham96]

This might be similar/related to #1086

[reinink]

Hey! Thanks so much for your interest in Inertia.js and for sharing this issue/suggestion.

In an attempt to get on top of the issues and pull requests on this project I am going through all the older issues and PRs and closing them, as there's a decent chance that they have since been resolved or are simply not relevant any longer. My hope is that with a "clean slate" me and the other project maintainers will be able to better keep on top of issues and PRs moving forward.

Of course there's a chance that this issue is still relevant, and if that's the case feel free to simply submit a new issue. The only thing I ask is that you please include a super minimal reproduction of the issue as a Git repo. This makes it much easier for us to reproduce things on our end and ultimately fix it.

Really not trying to be dismissive here, I just need to find a way to get this project back into a state that I am able to maintain it. Hope that makes sense! ❤️