diff --git a/docs/lib.md b/docs/lib.md index aba9f099..76797dc1 100644 --- a/docs/lib.md +++ b/docs/lib.md @@ -18,6 +18,7 @@ This component serves as the primary entry point for drawing dynamic forms. | Monaco | `React.ComponentType` | | [MonacoEditor](https://github.com/react-monaco-editor/react-monaco-editor) component for Monaco [Input](./config.md#inputs) | | search | `string \| function` | | A string or function for performing a form search | | withoutInsertFFDebounce | `boolean` | | Flag that disables the delay before inserting data into the final-form store | +| destroyOnUnregister | `boolean` | | If true, the value of a field will be destroyed when that field is unregistered. Defaults to true | | generateRandomValue | `function` | | Function that is necessary to generate a random value | ### Controller diff --git a/src/lib/core/components/Form/DynamicField.tsx b/src/lib/core/components/Form/DynamicField.tsx index 4616d10b..4bdc0feb 100644 --- a/src/lib/core/components/Form/DynamicField.tsx +++ b/src/lib/core/components/Form/DynamicField.tsx @@ -1,8 +1,8 @@ import React from 'react'; +import get from 'lodash/get'; import isFunction from 'lodash/isFunction'; import isString from 'lodash/isString'; -import get from 'lodash/get'; import {isValidElementType} from 'react-is'; import type {MonacoEditorProps} from 'react-monaco-editor/lib/types'; @@ -30,6 +30,7 @@ export interface DynamicFieldProps { search?: string | ((spec: Spec, input: FieldValue, name: string) => boolean); generateRandomValue?: (spec: StringSpec) => string; withoutInsertFFDebounce?: boolean; + destroyOnUnregister?: boolean; mutators?: DynamicFormMutators; __mirror?: WonderMirror; } @@ -42,13 +43,14 @@ export const DynamicField: React.FC = ({ generateRandomValue, search, withoutInsertFFDebounce, + destroyOnUnregister = true, mutators: externalMutators, __mirror, }) => { const DynamicFormsCtx = useCreateContext(); const SearchContext = useCreateSearchContext(); const {tools, store} = useStore(name); - const watcher = useIntegrationFF(store, withoutInsertFFDebounce); + const watcher = useIntegrationFF(store, withoutInsertFFDebounce, destroyOnUnregister); const {mutatorsStore, mutateDFState} = useMutators(externalMutators); const {store: searchStore, setField, removeField, isHiddenField} = useSearchStore(); diff --git a/src/lib/core/components/Form/hooks/useIntegrationFF.tsx b/src/lib/core/components/Form/hooks/useIntegrationFF.tsx index 6b5938ef..f544e506 100644 --- a/src/lib/core/components/Form/hooks/useIntegrationFF.tsx +++ b/src/lib/core/components/Form/hooks/useIntegrationFF.tsx @@ -10,7 +10,11 @@ import {Field as FinalFormField, useForm} from 'react-final-form'; import {AsyncValidateError, BaseValidateError, DynamicFieldStore, FieldValue} from '../types'; import {transformArrOut} from '../utils'; -export const useIntegrationFF = (store: DynamicFieldStore, withoutDebounce?: boolean) => { +export const useIntegrationFF = ( + store: DynamicFieldStore, + withoutDebounce?: boolean, + destroyOnUnregister?: boolean, +) => { const form = useForm(); const watcher = React.useMemo(() => { @@ -64,7 +68,7 @@ export const useIntegrationFF = (store: DynamicFieldStore, withoutDebounce?: boo React.useEffect(() => { return () => { - if (store.name) { + if (store.name && destroyOnUnregister) { form.change(store.name, undefined); } };