IsDirty keep at true after form submit

[Oui-Dev]

Versions:

• @inertiajs/react version: 1.0.15
• laravel/framework version : 10.46.0
• react version : 18.2.0
• @vitejs/plugin-reactversion : 4.2.1
• laravel-vite-plugin version : 1.0.2
• vite version : 5.1.6

Describe the problem:

For a Searchbar component I make a form with many fields but when I submit it (using form.get) isDirty keep at true if preserveState is set to true. I don't know if I make something wrong with my default values or with the debounce.

I saw someone with a similar issue here #1033 but I don't understand how he solve it.

Code

    const allParams = usePage().props.route.query;
    const currentRouteName = usePage().props.route.name;

    const form = useForm({
        search: allParams.search || '',
        searchBy: allParams.searchBy ?? searchByOpts[0].key,
        orderBy: allParams.orderBy || 'DESC'
    });

    const [debounceTimeout, setDebounceTimeout] = useState(null);

    useEffect(() => {
        console.log('isDirty', form.isDirty)
        if(form.isDirty) {
            console.log(form.data);

            // Clear the previous debounced function
            if (debounceTimeout) clearTimeout(debounceTimeout);

            // Create a new debounced function
            setDebounceTimeout(setTimeout(() => {
                form.get(route(currentRouteName), { preserveScroll: true, preserveState: true });
            }, 200));
        }
    }, [form.isDirty]);

[fnagel]

Same issue here. isDirty is always true after first submit. Any ideas what's wrong?

[PedroAugustoRamalhoDuarte]

@Oui-Dev and @fnagel you can fix that calling setDefault inside onFinish, example:

  const handleSave = (e) => {
    e.preventDefault();
    patch("/settings/profile", {
      onSuccess: () => {
        toast.success("Dados atualizados com sucesso");
      },
      onError: () => {
        toast.error("Erro ao atualizar dados");
      },
      onFinish: () => {
        setDefaults();
      },
    });
  };

[Oui-Dev]

Thks for your reply, but honestly, I'm no longer working on the project that was causing me this problem (and I'm no longer working with React at all either).