Why you delete value when dynamic field is hiden?

[dzwiedziu-nkg]

Hi,

In this sample the spouse field is dynamic.

Why you clear spouse value when field is hide?

This makes it impossible to create complex forms, eg with tabs. Clearing value should be optional, configured in props.

[joepuzzo]

So this was by design. Its not a hidden field its actually removed from the dom.. i.e componentWillUnmount was called.. it was literally unmounted and null was returned instead. There are other people that want this useless. The example you reference being a perfect example. Why send a spouse as part of a form when you are single lol

[dzwiedziu-nkg]

Other people want to save value :)

Simple example: https://dzwiedziu-nkg.github.io/test-react-informed/
Source: https://github.com/dzwiedziu-nkg/test-react-informed

Use case:

1. User want to export data so fill global setting 1, global setting 2 etc. and check format: xml, json or csv.
2. User checks xml.
3. User fill settings for xml.
4. User changed his intention and checks json.
5. User fill settings for json.
6. User changed his intention and want to back to xml. So user checks xml again and see that previous settings for xml lost and hi must fill again.

[joepuzzo]

That sounds like its a bad form design.. you have fields that are there whether its json or xml...

[dzwiedziu-nkg]

So what You proposal a good form design? I think the clear value on unmount should be configurable i.e. form's props.

[joepuzzo]

Why are you unmounting inputs that you want to keep?

[dzwiedziu-nkg]

Because conditional rendering in ReactJS that works. Workaround: set display: none CSS style instead conditional rendering :(

[joepuzzo]

So im still confused.. Here is a scenario:

You have a field would you like ice-cream or a shake?

Acceptance Criteria:

1. When ice-cream is selected, show the field would you like a bowl or a cone ( only shows if ice-cream is selected )
2. When shake is selected, show the field would you like that thick or thin?( only show if shake is selected )
3. When Either Shake or Ice-Cream is selected, show the field would you like chocolate or Vanilla

Now lets say the user selects ice-cream.. then selects vanilla and a cone. Then they change there mind and want a Vanilla shake.. in this case you would want the cone selection to go away. But you would keep the chocolate or vanilla selection.

[ajwootto]

What if you're making a form where only parts of it are shown at a time as you progress through the form?

A good example is a modern signup flow similar to what a lot of sites have now. They ask you to enter an email and that's the only field on the page. After you do that, the password field appears in place of the email field and the email field disappears.

The tab example above is another one. Say you're filling out a complex form where some of the fields are on a different "Tab" of the interface. You click to the other tab and the fields you've filled out previously are unloaded from the DOM as the contents of the page are replaced with the ones for the other tab. You'd still want to have access to the total set of values entered so far, but currently you lose the part of the form's values that were set before the tab was changed. Tabs are often implemented in React by conditionally changing the contents of the page according to the active tab rather than by rendering all the possible tab pages at once and hiding the other ones with CSS.

[seniorquico]

I also came looking for a solution to the use case where the form is only partially visible at any given time. The fields/values are still applicable and necessary, regardless of whether or not they're mounted. A display: none CSS hack is not acceptable for our project.

Informed takes care of state so you don't have to!

Not for this use case... it looks like the only solution is to manage our own external state... be it in a parent component or in Redux. Taking that route feels like we're making our own form library, giving up on the API and form lifecycle of Informed.

[rwrobe]

This is the same problem I'm having with multi-step forms. I'm having to put display:none on form sections instead of conditionally rendering them. Would love to see some enhancement in the future that allows for this.

[OliverColeman]

I'd also like the form values entered to stay in the form state even if the field has since become unmounted, the reason being that in my use case the field may only be unmounted temporarily, depending on selections made in prior form elements. Eg in a mapping application a location can be entered as an address or a lat/long. The address OR lat/long fields are shown depending on the value of a Select, which can be changed at any time. If the user enters an address or lat/long and then switches the location input mode (accidentally, out of curiosity, or for some other reason) then the values entered will be wiped when they switch back to the original input mode. This is definitely not very nice from a usability perspective.

[dzwiedziu-nkg]

Only one what we want is remove this line: https://github.com/joepuzzo/informed/blob/6aabe1d778f5b4ab988708b7a0c294ce99910674/src/Controller/FormController.js#L215 or make it configurable.

[mrherickz]

@dzwiedziu-nkg really good mentioned.

I got the state problem on a app, it makes total sense to remove fields when they are not there.

But in some cases such as a Form Wizard, we must be able to keep the fields there in the form state, as the user go to the next steps. We can't only go by adding display:none, because sometimes we use some UI framework with pre built components. (In my case Material UI).

[mrfelton]

There is a suggestion here to have each step of the form as a standalone form, though I'm not clear on the best way to do that in practice with an en easy way to move back and forwards in the process.

[freshly-pressed-trousers]

Also having a whole world of problems with this behaviour, using a css display: none with the setup we've got seems to unintentionally trigger validation for those hidden fields - albeit I'm sure there's a way around and a lot of that is down to how we've using it; but does seem to greatly undermine the ease of use with this lib.

Would be great to be able to pass a boolean prop to the Form component to configure this.

[Flamage82]

Our particular use case where we became stuck with this issue is where we have an address form with two modes - one for a Google Maps API search, and another where the user can manually set the address fields. The problem being that switching between the two modes would resets the contents of the form, so we've had to employ hiding the inputs rather than conditionally rendering, which isn't our preference.

[peterboyer]

Just encountering this problem also! I have my form split up in smaller parts as components, and notice that my previous values are cleared as I switch out the current form page with a different page. I'm going to have to manage this externally with merging values objects and then passing that for submission...

[joepuzzo]

V2 will support this! What i have done is added a prop called keepState that will "keep the state" around!

[mrherickz]

Hey @joepuzzo, that's awesome to hear! Do you have any expectations of a launch date for it?

[joepuzzo]

When react releases the version with hooks lol

[joepuzzo]

You can check out my branch “hooked-on-hooks” if u want a sneak peak

[joepuzzo]

Ok V2 is out!!!! go check it out