jaredpalmer / jaredpalmer/formik

Support setting initialValues in lazily loaded forms

Open
#3,907 0 comments 1 reaction 0 assignees View on GitHub
Type: Feature Request
Dominant language
TypeScript
Stars
34.3k
Forks
2.8k
PR merge metrics
No merged PRs in 30d

Description

## Feature request

There is a scenario of edit, where we have a very long form which fetches data from multiple sources for each section which is inside accordions. We fetch and auto-populate the data only when an accordion is expanded, else we don't need to send it back for modification. The requirement is to support this kind of form edits, where we can set initialValues for different fields independently even after the initial form load while also preserving the correctness of isDirty, isTouched properties. Be aware that the form data on submit might be partial as we want to load partial and send back only what was was modified.

### Current Behavior

I experimented with enableReinitialize prop on Formik. Indeed, we can set initial Values at a later point of time after an async load. But it overrides all the edits as well.

### Desired Behavior

To set initialValues of only a desired field such that the form edits are not lost for other fields.

### Suggested Solution

If it can be possible to set it at the filed level additionally. isDirty can also be provided at field level in addition to form.
e.g. -
`field.setInitialFieldValue(newValue )`

### Who does this impact? Who is this for?

It can be useful for long and async loaded forms to be able to use out of the box solution from Formik in case of 'modify' forms.

### Describe alternatives you've considered

I did it by using state management and creating my own copy of initialValues which is modified each time we async load a field. It works but does look verbose and doing a lot things what could be possibly provided natively by Formik. At, submit we compare formik values and our state. isDirty is of course not useful anymore.

### Additional context

Contributor guide

Open the contributing guide

Research direction

Start by examining Formik's existing enableReinitialize behavior and the form and field state represented by initialValues, isDirty, and isTouched. Define how independently loaded fields should update their initial values without overwriting other edits, and verify that partial submission preserves only the intended modifications.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.