fix(core): fix object field's children auto clean but they are not ad…

…ditionalProperty (#1840)
alibaba · Jul 20, 2021 · dd31364 · dd31364
1 parent 1475c9c
commit dd31364
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 14 deletions.
diff --git a/packages/core/src/__tests__/field.spec.ts b/packages/core/src/__tests__/field.spec.ts
@@ -1381,19 +1381,29 @@ test('auto clean with ObjectField', () => {
   )
   expect(form.values.obj).toEqual({ aa: '123' })
   expect(form.fields['obj.aa']).not.toBeUndefined()
-  expect(form.fields['obj.bb']).toBeUndefined()
+  expect(form.fields['obj.bb']).not.toBeUndefined()
   expect(form.fields['obj1.aa']).not.toBeUndefined()
   expect(form.fields['obj1.bb']).not.toBeUndefined()
   expect(form.values.obj1).toEqual({ aa: 'aa', bb: 'bb' })
   obj1.setValue({})
   expect(form.values.obj1).toEqual({})
-  expect(form.fields['obj1.aa']).toBeUndefined()
-  expect(form.fields['obj1.bb']).toBeUndefined()
+  expect(form.fields['obj1.aa']).not.toBeUndefined()
+  expect(form.fields['obj1.bb']).not.toBeUndefined()
   expect(form.fields['obj2.aa']).not.toBeUndefined()
   expect(form.fields['obj2.bb']).not.toBeUndefined()
   expect(form.values.obj2).toEqual({ aa: 'aa', bb: 'bb' })
   obj2.setValue({ aa: 'aa', bb: 'bb', cc: 'cc' })
   expect(form.fields['obj2.aa']).not.toBeUndefined()
   expect(form.fields['obj2.bb']).not.toBeUndefined()
   expect(form.fields['obj2.cc']).toBeUndefined()
+  obj2.addProperty('cc', '123')
+  attach(
+    form.createField({
+      name: 'cc',
+      basePath: 'obj2',
+    })
+  )
+  expect(form.fields['obj2.cc']).not.toBeUndefined()
+  obj2.removeProperty('cc')
+  expect(form.fields['obj2.cc']).toBeUndefined()
 })
diff --git a/packages/core/src/models/ObjectField.ts b/packages/core/src/models/ObjectField.ts
@@ -1,15 +1,15 @@
-import { FormPathPattern } from '@formily/shared'
 import { reaction } from '@formily/reactive'
-import { JSXComponent, IFieldProps } from '../types'
+import { cleanupObjectChildren } from '../shared/internals'
+import { JSXComponent, IFieldProps, FormPathPattern } from '../types'
 import { Field } from './Field'
 import { Form } from './Form'
-import { cleanupObjectChildren } from '../shared/internals'
+
 export class ObjectField<
   Decorator extends JSXComponent = any,
   Component extends JSXComponent = any
 > extends Field<Decorator, Component, any, Record<string, any>> {
   displayName = 'ObjectField'
-
+  private additionalProperties: string[] = []
   constructor(
     address: FormPathPattern,
     props: IFieldProps<Decorator, Component>,
@@ -24,27 +24,29 @@ export class ObjectField<
     this.disposers.push(
       reaction(
         () => Object.keys(this.value || {}),
-        (newKeys, oldKeys) => {
-          cleanupObjectChildren(
-            this,
-            oldKeys.filter((key) => !newKeys.includes(key))
+        (newKeys) => {
+          const filterKeys = this.additionalProperties.filter(
+            (key) => !newKeys.includes(key)
           )
+          cleanupObjectChildren(this, filterKeys)
         }
       )
     )
   }
 
-  addProperty = async (key: FormPathPattern, value: any) => {
+  addProperty = async (key: string, value: any) => {
     this.form.setValuesIn(this.path.concat(key), value)
+    this.additionalProperties.push(key)
     return this.onInput(this.value)
   }
 
-  removeProperty = async (key: FormPathPattern) => {
+  removeProperty = async (key: string) => {
     this.form.deleteValuesIn(this.path.concat(key))
+    this.additionalProperties.splice(this.additionalProperties.indexOf(key), 1)
     return this.onInput(this.value)
   }
 
-  existProperty = (key: FormPathPattern) => {
+  existProperty = (key: string) => {
     return this.form.existValuesIn(this.path.concat(key))
   }
 }
diff --git a/packages/core/src/shared/internals.ts b/packages/core/src/shared/internals.ts
@@ -386,6 +386,7 @@ export const cleanupArrayChildren = (field: ArrayField, start: number) => {
 }
 
 export const cleanupObjectChildren = (field: ObjectField, keys: string[]) => {
+  if (keys.length === 0) return
   const address = field.address.toString()
   const fields = field.form.fields