fix: preserve should back to initialValues (#255)

* docs: Add test example

* test: Update test case

* fix lint

* fix: keep logic

Author: zombieJ

.eslintrc.js

@@ -15,5 +15,8 @@ module.exports = {
     'jsx-a11y/label-has-associated-control': 0,
     'import/no-extraneous-dependencies': 0,
     'import/no-unresolved': 0,
+    '@typescript-eslint/no-redeclare': 0,
+    '@typescript-eslint/method-signature-style': 0,
+    'no-async-promise-executor': 0,
   },
 };

.gitignore

@@ -13,6 +13,7 @@
 /es
 /lib
 .doc
+/coverage
 
 # misc
 .DS_Store

docs/demo/deps.md

@@ -0,0 +1,4 @@
+## deps
+
+
+<code src="../examples/deps.tsx" />

docs/demo/preserve.md

@@ -0,0 +1,4 @@
+## preserve
+
+
+<code src="../examples/preserve.tsx" />

docs/examples/preserve.tsx

@@ -0,0 +1,43 @@
+/* eslint-disable react/prop-types */
+
+import React from 'react';
+import Form from 'rc-field-form';
+import Input from './components/Input';
+
+const { Field } = Form;
+
+export default () => {
+  const [form] = Form.useForm();
+
+  return (
+    <Form
+      form={form}
+      initialValues={{ test: 'bamboo' }}
+      onFinish={values => {
+        console.log('Submit:', values);
+      }}
+    >
+      <Field shouldUpdate>
+        {() => (
+          <>
+            <Field name="test" preserve={false}>
+              <Input />
+            </Field>
+            {/* <Field name="test">
+                <Input />
+              </Field> */}
+          </>
+        )}
+      </Field>
+      <button type="submit">Submit</button>
+      <button
+        type="button"
+        onClick={() => {
+          form.resetFields();
+        }}
+      >
+        Reset
+      </button>
+    </Form>
+  );
+};

package.json

@@ -59,11 +59,13 @@
     "@types/lodash": "^4.14.135",
     "@types/react": "^16.8.19",
     "@types/react-dom": "^16.8.4",
+    "@umijs/fabric": "^2.5.2",
     "@umijs/test": "^3.2.27",
     "dumi": "^1.1.0",
     "enzyme": "^3.1.0",
     "enzyme-adapter-react-16": "^1.0.2",
     "enzyme-to-json": "^3.1.4",
+    "eslint": "^7.18.0",
     "father": "^2.13.6",
     "father-build": "^1.18.6",
     "gh-pages": "^3.1.0",

src/Field.tsx

@@ -386,6 +386,8 @@ class Field extends React.Component<InternalFieldProps, FieldState> implements F
 
   public isList = () => this.props.isList;
 
+  public isPreserve = () => this.props.preserve;
+
   // ============================= Child Component =============================
   public getMeta = (): Meta => {
     // Make error & validating in cache to save perf

src/interface.ts

@@ -99,6 +99,7 @@ export interface FieldEntity {
   isFieldValidating: () => boolean;
   isListField: () => boolean;
   isList: () => boolean;
+  isPreserve: () => boolean;
   validateRules: (options?: ValidateOptions) => Promise<string[]>;
   getMeta: () => Meta;
   getNamePath: () => InternalNamePath;

src/useForm.ts

@@ -30,6 +30,7 @@ import {
   containsNamePath,
   getNamePath,
   getValue,
+  matchNamePath,
   setValue,
   setValues,
 } from './utils/valueUtil';
@@ -542,8 +543,18 @@ export class FormStore {
       const mergedPreserve = preserve !== undefined ? preserve : this.preserve;
       if (mergedPreserve === false && !isListField) {
         const namePath = entity.getNamePath();
-        if (namePath.length && this.getFieldValue(namePath) !== undefined) {
-          this.store = setValue(this.store, namePath, undefined);
+        const defaultValue = getValue(this.initialValues, namePath);
+
+        if (
+          namePath.length &&
+          this.getFieldValue(namePath) !== defaultValue &&
+          this.fieldEntities.every(
+            field =>
+              // Only reset when no namePath exist
+              !matchNamePath(field.getNamePath(), namePath),
+          )
+        ) {
+          this.store = setValue(this.store, namePath, defaultValue);
         }
       }
     };

tests/preserve.test.tsx

@@ -37,7 +37,7 @@ describe('Form.Preserve', () => {
 
     await matchTest(false, { keep: 233, remove: 666 });
     await matchTest(true, { keep: 233 });
-    await matchTest(false, { keep: 233 });
+    await matchTest(false, { keep: 233, remove: 666 });
   });
 
   it('form', async () => {
@@ -54,7 +54,49 @@ describe('Form.Preserve', () => {
 
     await matchTest(false, { keep: 233, remove: 666 });
     await matchTest(true, { keep: 233 });
-    await matchTest(false, { keep: 233 });
+    await matchTest(false, { keep: 233, remove: 666 });
+  });
+
+  it('keep preserve when other field exist the name', async () => {
+    const formRef = React.createRef<FormInstance>();
+
+    const KeepDemo = ({ onFinish, keep }: { onFinish: (values: any) => void; keep: boolean }) => {
+      return (
+        <Form ref={formRef} initialValues={{ test: 'bamboo' }} onFinish={onFinish}>
+          <Form.Field shouldUpdate>
+            {() => {
+              return (
+                <>
+                  {keep && <InfoField name="test" preserve={false} />}
+                  <InfoField name="test" />
+                </>
+              );
+            }}
+          </Form.Field>
+        </Form>
+      );
+    };
+
+    const onFinish = jest.fn();
+    const wrapper = mount(<KeepDemo onFinish={onFinish} keep />);
+
+    // Change value
+    wrapper
+      .find('input')
+      .first()
+      .simulate('change', { target: { value: 'light' } });
+
+    formRef.current.submit();
+    await timeout();
+    expect(onFinish).toHaveBeenCalledWith({ test: 'light' });
+    onFinish.mockReset();
+
+    // Remove preserve should not change the value
+    wrapper.setProps({ keep: false });
+    await timeout();
+    formRef.current.submit();
+    await timeout();
+    expect(onFinish).toHaveBeenCalledWith({ test: 'light' });
   });
 
   it('form perishable but field !perishable', async () => {