fix(core): fix field value restored incorrectly when hidden toggled (#…

…1529) * fix(core): fix field value restored incorrectly when hidden toggled * test(core): test relationship between field display and value
alibaba · May 31, 2021 · 047c98a · 047c98a
1 parent 55b9342
commit 047c98a
Show file tree

Hide file tree

Showing 2 changed files with 91 additions and 4 deletions.
diff --git a/packages/core/src/__tests__/field.spec.ts b/packages/core/src/__tests__/field.spec.ts
@@ -65,6 +65,91 @@ test('create field props', () => {
   expect(field5.initialValue).toEqual(123)
 })
 
+test('field display and value', () => {
+  const form = attach(createForm())
+  const objectField = attach(
+    form.createObjectField({
+      name: 'object',
+    })
+  )
+  const arrayField = attach(
+    form.createArrayField({
+      name: 'array',
+    })
+  )
+  const valueField = attach(
+    form.createField({
+      name: 'value',
+    })
+  )
+  expect(objectField.value).toEqual({})
+  expect(arrayField.value).toEqual([])
+  expect(valueField.value).toBeUndefined()
+
+  objectField.hidden = true
+  arrayField.hidden = true
+  valueField.hidden = true
+  expect(objectField.value).toEqual({})
+  expect(arrayField.value).toEqual([])
+  expect(valueField.value).toBeUndefined()
+
+  objectField.hidden = false
+  arrayField.hidden = false
+  valueField.hidden = false
+  expect(objectField.value).toEqual({})
+  expect(arrayField.value).toEqual([])
+  expect(valueField.value).toBeUndefined()
+
+  objectField.visible = false
+  arrayField.visible = false
+  valueField.visible = false
+  expect(objectField.value).toBeUndefined()
+  expect(arrayField.value).toBeUndefined()
+  expect(valueField.value).toBeUndefined()
+
+  objectField.visible = true
+  arrayField.visible = true
+  valueField.visible = true
+  expect(objectField.value).toEqual({})
+  expect(arrayField.value).toEqual([])
+  expect(valueField.value).toBeUndefined()
+
+  objectField.value = { value: '123' }
+  arrayField.value = ['123']
+  valueField.value = '123'
+  expect(objectField.value).toEqual({ value: '123' })
+  expect(arrayField.value).toEqual(['123'])
+  expect(valueField.value).toEqual('123')
+
+  objectField.hidden = true
+  arrayField.hidden = true
+  valueField.hidden = true
+  expect(objectField.value).toEqual({ value: '123' })
+  expect(arrayField.value).toEqual(['123'])
+  expect(valueField.value).toEqual('123')
+
+  objectField.hidden = false
+  arrayField.hidden = false
+  valueField.hidden = false
+  expect(objectField.value).toEqual({ value: '123' })
+  expect(arrayField.value).toEqual(['123'])
+  expect(valueField.value).toEqual('123')
+
+  objectField.visible = false
+  arrayField.visible = false
+  valueField.visible = false
+  expect(objectField.value).toBeUndefined()
+  expect(arrayField.value).toBeUndefined()
+  expect(valueField.value).toBeUndefined()
+
+  objectField.visible = true
+  arrayField.visible = true
+  valueField.visible = true
+  expect(objectField.value).toEqual({ value: '123' })
+  expect(arrayField.value).toEqual(['123'])
+  expect(valueField.value).toEqual('123')
+})
+
 test('nested display/pattern', () => {
   const form = attach(createForm())
   const object_ = attach(

diff --git a/packages/core/src/models/Field.ts b/packages/core/src/models/Field.ts
@@ -244,14 +244,16 @@ export class Field<
       reaction(
         () => this.display,
         (display) => {
-          if (display === 'none') {
-            this.caches.value = toJS(this.value)
-            this.form.deleteValuesIn(this.path)
-          } else if (display === 'visible') {
+          if (display === 'visible') {
             if (isEmpty(this.value)) {
               this.setValue(this.caches.value)
               this.caches.value = undefined
             }
+          } else {
+            this.caches.value = toJS(this.value)
+            if (display === 'none') {
+              this.form.deleteValuesIn(this.path)
+            }
           }
           if (display === 'none' || display === 'hidden') {
             this.setFeedback({