Add method to untouch fields (specifically when they are unmounted)

[huwmartin]

We have a use-case with our forms where some fields are conditionally rendered e.g. based on the value of another field or because the you can 'Add another'.

Running into an issue however where fields are rendered and touched and then when they are unmounted from the DOM to no longer be shown their state in form state remains as touched being true. This means that if the fields are re-mounted again they will immediately display errors present on the field (because we are determining whether field errors/warnings should be show based on whether it is touched). Do you think it is reasonable to determine whether errors should be shown based on touched state for the field? Can you suggest an alternative from your own usage?

Alternatively, other things I've been considering:

• could/should form-container handle this kind of cleanup when the field is unmounted? For this to work we would probably need a HOC to render a field which can be rendered inside a form and does necessary cleanup in its willUnmount
• low-effort solution would be to expose a setFieldToUntouched(field: string) or setTouched(field: string, touched: boolean) function in formMethods, which would allow us to do the necessary cleanup in onClick/onChange handlers

[vitkon]

interesting issue. didn't think about it before.
is there a way to reproduce it in codesandbox?

[huwmartin]

Put together a quick example here: https://codesandbox.io/s/p7l1lrr1pq

This isn't completely representative, in our own usage we've added some extra logic in the validators to only apply the validation when the field is rendered (e.g. the bankAccountType === 'BUILDING_SOCIETY' condition), but it will give you an idea of what we are working with.

Steps to reproduce:

1. Select 'Building society' for 'Bank account type'
2. Touch the 'Roll' number field and enter a value
3. Clear the value so that an error is shown
4. Select 'Bank' for 'Bank account type' so that Roll number is hidden
5. Select 'Building society' for 'Bank account type' so that 'Roll number' is shown again

Expected result:

Field should probably be untouched and should not show an error

Actual result:

Field has remained touched and error is shown

Hope this helps! Let me know what you think.

[vitkon]

I think adding a resetField method would be a good first step as it's harder to hook into unmount lifecycle, especially if component is a function.