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

Edit Values Are Not Being Set in FormBuilder #62

Open
yuvrajatishay opened this issue Jan 16, 2025 · 0 comments
Open

Edit Values Are Not Being Set in FormBuilder #62

yuvrajatishay opened this issue Jan 16, 2025 · 0 comments

Comments

@yuvrajatishay
Copy link

When using the FormBuilder with the renderFormFields function, I am unable to set default or prefilled values when editing a form. Despite passing currentRow as the initial values, the form fields do not update properly in edit mode.


Steps to Reproduce

  1. Use the FormBuilder to render a form dynamically from a JSON schema.
  2. Pass the currentRow data object to the form as default or prefilled values.
  3. Observe that the fields remain empty instead of populating with the currentRow data.

Example Code

const defaultVals = generateDefaultValues(categoryFormFields);
const formSchema = generateZodSchema(categoryFormFields);

const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: defaultVals,
});

// Resetting form values for edit mode
useEffect(() => {
    if (open && currentRow) {
        form.reset(currentRow); // Doesn't populate fields
    }
}, [open, currentRow, form]);

// Rendering form fields
<Form {...form}>
    <form id="category-form" onSubmit={form.handleSubmit(onSubmit)}>
        {renderFormFields(categoryFormFields, form)}
    </form>
</Form>

This code letting it to produce infinite render error


Expected Behavior

  • When currentRow is provided, the form fields should populate with the data from currentRow.
  • The renderFormFields function should correctly bind the data to the corresponding form fields.

Observed Behavior

  • Form fields remain empty in edit mode, even when currentRow has valid data.
  • The renderFormFields function does not seem to recognize the updated values passed through form.reset.

Screenshot from 2025-01-16 12-08-57
This when we create data

Screenshot from 2025-01-16 12-08-50
This when we Edit data

but the values are not setting on the fields

Additional Context

  • The issue might be related to how renderFormFields handles the defaultValues or reset functionality from React Hook Form.
  • The form works correctly in "create mode" (default values), but fails to update when switching to "edit mode".
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant