AutoSave saves even if required fields are empty. How to wait for isValid?
Hi,
So I'm playing with refine.dev with Mui. AutoSave would be lovely to have, but it saves data , even if some fields are required.
I've been using it with Appwrite and it also saves empty values, even if on Appwrite it is specified as Required :/ which I will chat with them about that separately.
It seems to work fine(at least client side) while simply using Save button, as it correctly stops you from saving when a field is in error state, but autosave seems to ignore validation errors.
Any idea what am I doing wrong, or is it just a bug and I should document it better and log on github issues?
The important parts of my code are:
import { AutoSaveIndicator , DateField, Edit, NumberField } from "@refinedev/mui";
import { useForm } from "@refinedev/react-hook-form";
...
const {
refineCore: { autoSaveProps,onFinishAutoSave },
saveButtonProps,
refineCore: { query },
register,
control,
formState: { errors, isValid:boolean, isValidating },
} = useForm({
mode: 'onChange',
refineCoreProps: {
liveMode: "auto",
autoSave: {
enabled: true,
debounce: 1500,
},
}
});
....
return (
<Edit saveButtonProps={saveButtonProps} autoSaveProps={autoSaveProps}>
....
<TextField
{...register("name", { required: "This field is required" })}
error={!!(errors as any)?.name}
label="Name"
name="name"
/>
...
</Edit>
So I'm playing with refine.dev with Mui. AutoSave would be lovely to have, but it saves data , even if some fields are required.
I've been using it with Appwrite and it also saves empty values, even if on Appwrite it is specified as Required :/ which I will chat with them about that separately.
It seems to work fine(at least client side) while simply using Save button, as it correctly stops you from saving when a field is in error state, but autosave seems to ignore validation errors.
Any idea what am I doing wrong, or is it just a bug and I should document it better and log on github issues?
The important parts of my code are:
import { AutoSaveIndicator , DateField, Edit, NumberField } from "@refinedev/mui";
import { useForm } from "@refinedev/react-hook-form";
...
const {
refineCore: { autoSaveProps,onFinishAutoSave },
saveButtonProps,
refineCore: { query },
register,
control,
formState: { errors, isValid:boolean, isValidating },
} = useForm({
mode: 'onChange',
refineCoreProps: {
liveMode: "auto",
autoSave: {
enabled: true,
debounce: 1500,
},
}
});
....
return (
<Edit saveButtonProps={saveButtonProps} autoSaveProps={autoSaveProps}>
....
<TextField
{...register("name", { required: "This field is required" })}
error={!!(errors as any)?.name}
label="Name"
name="name"
/>
...
</Edit>
