fix: Form preserve should not clear when top level need keep (#442)

* test: test dricen

* fix: perserve logic

Author: zombieJ

docs/examples/basic.tsx

@@ -4,34 +4,40 @@ import Input from './components/Input';
 
 export default () => {
   const [form] = Form.useForm();
+  const [show, setShow] = React.useState(true);
+  const [timeoutShow, setTimeoutShow] = React.useState(show);
 
-  return (
-    <Form form={form} preserve={false}>
-      <Field name="name">
-        <Input placeholder="Username" />
-      </Field>
+  React.useEffect(() => {
+    if (show) {
+      console.log(
+        'show',
+      );
+      form.setFieldsValue({
+        name: '123',
+      });
+    }
+
+    const id = setTimeout(() =>{
+      setTimeoutShow(show);
+    }, 300);
+
+    return () => clearTimeout(id);
+  }, [show]);
 
-      <Field dependencies={['name']}>
-        {() => {
-          return form.getFieldValue('name') === '1' ? (
-            <Field name="password">
-              <Input placeholder="Password" />
-            </Field>
-          ) : null;
-        }}
-      </Field>
 
-      <Field dependencies={['password']}>
-        {() => {
-          const password = form.getFieldValue('password');
-          console.log('>>>', password);
-          return password ? (
-            <Field name="password2">
-              <Input placeholder="Password 2" />
-            </Field>
-          ) : null;
-        }}
-      </Field>
-    </Form>
+
+  return (
+    <>
+      <button onClick={() =>{
+        setShow(!show);
+      }}>Trigger</button>
+      {
+        timeoutShow && <Form form={form}>
+          <Form.Field name="name">
+            <Input />
+          </Form.Field>
+        </Form>
+      }
+    </>
   );
 };

src/useForm.ts

@@ -1,32 +1,33 @@
-import * as React from 'react';
 import warning from 'rc-util/lib/warning';
+import * as React from 'react';
+import { HOOK_MARK } from './FieldContext';
 import type {
   Callbacks,
   FieldData,
   FieldEntity,
   FieldError,
-  InternalNamePath,
+  FormInstance,
+  InternalFieldData,
+  InternalFormInstance,
   InternalHooks,
+  InternalNamePath,
+  InternalValidateFields,
+  Meta,
   NamePath,
   NotifyInfo,
+  RuleError,
   Store,
-  ValidateOptions,
-  FormInstance,
-  ValidateMessages,
-  InternalValidateFields,
-  InternalFormInstance,
-  ValidateErrorEntity,
   StoreValue,
-  Meta,
-  InternalFieldData,
+  ValidateErrorEntity,
+  ValidateMessages,
+  ValidateOptions,
   ValuedNotifyInfo,
-  RuleError,
   WatchCallBack,
 } from './interface';
-import { HOOK_MARK } from './FieldContext';
 import { allPromiseFinish } from './utils/asyncUtil';
-import NameMap from './utils/NameMap';
+import cloneDeep from './utils/cloneDeep';
 import { defaultValidateMessages } from './utils/messages';
+import NameMap from './utils/NameMap';
 import {
   cloneByNamePathList,
   containsNamePath,
@@ -36,7 +37,6 @@ import {
   setValue,
   setValues,
 } from './utils/valueUtil';
-import cloneDeep from './utils/cloneDeep';
 
 type InvalidateFieldEntity = { INVALIDATE_NAME_PATH: InternalNamePath };
 
@@ -157,7 +157,7 @@ export class FormStore {
   private destroyForm = () => {
     const prevWithoutPreserves = new NameMap<boolean>();
     this.getFieldEntities(true).forEach(entity => {
-      if (!entity.isPreserve()) {
+      if (!this.isMergedPreserve(entity.isPreserve())) {
         prevWithoutPreserves.set(entity.getNamePath(), true);
       }
     });
@@ -604,6 +604,11 @@ export class FormStore {
     }
   };
 
+  private isMergedPreserve = (fieldPreserve?: boolean) => {
+    const mergedPreserve = fieldPreserve !== undefined ? fieldPreserve : this.preserve;
+    return mergedPreserve ?? true;
+  };
+
   private registerField = (entity: FieldEntity) => {
     this.fieldEntities.push(entity);
     const namePath = entity.getNamePath();
@@ -622,10 +627,9 @@ export class FormStore {
     // un-register field callback
     return (isListField?: boolean, preserve?: boolean, subNamePath: InternalNamePath = []) => {
       this.fieldEntities = this.fieldEntities.filter(item => item !== entity);
-      // Clean up store value if not preserve
-      const mergedPreserve = preserve !== undefined ? preserve : this.preserve;
 
-      if (mergedPreserve === false && (!isListField || subNamePath.length > 1)) {
+      // Clean up store value if not preserve
+      if (!this.isMergedPreserve(preserve) && (!isListField || subNamePath.length > 1)) {
         const defaultValue = isListField ? undefined : this.getInitialValue(namePath);
 
         if (

tests/preserve.test.tsx

@@ -1,7 +1,8 @@
 /* eslint-disable no-template-curly-in-string, arrow-body-style */
-import React from 'react';
 import { mount } from 'enzyme';
-import Form, { FormInstance } from '../src';
+import React from 'react';
+import type { FormInstance } from '../src';
+import Form from '../src';
 import InfoField, { Input } from './common/InfoField';
 import timeout from './common/timeout';
 
@@ -438,5 +439,37 @@ describe('Form.Preserve', () => {
       expect(wrapper.exists('#password2')).toBeFalsy();
     });
   });
+
+  it('should correct calculate preserve state', () => {
+    let instance: FormInstance;
+
+    const VisibleDemo = ({ visible = true }: { visible?: boolean }) => {
+      const [form] = Form.useForm();
+      instance = form;
+
+      return visible ? (
+        <Form form={form}>
+          <Form.Field name="name">
+            <Input />
+          </Form.Field>
+        </Form>
+      ) : (
+        <div />
+      );
+    };
+
+    const wrapper = mount(<VisibleDemo />);
+
+    wrapper.setProps({
+      visible: false,
+    });
+
+    instance.setFieldsValue({ name: 'bamboo' });
+    wrapper.setProps({
+      visible: true,
+    });
+
+    expect(wrapper.find('input').prop('value')).toEqual('bamboo');
+  });
 });
 /* eslint-enable no-template-curly-in-string */