From 97bb44d983ce6810c31cbc049e10c32453f2e38e Mon Sep 17 00:00:00 2001
From: janryWang <wangzhili56@126.com>
Date: Tue, 23 Apr 2019 22:29:54 +0800
Subject: [PATCH] fix(@uform/react): fix field dynamic hidden will effect other
 field. When the virtual box without name is hidden in the dynamic display, it
 will affect the dynamic hiding of the adjacent virtual box.

---
 packages/core/src/field.js                    |  6 +++
 packages/core/src/form.js                     |  7 ----
 packages/react/src/__tests__/validate.spec.js | 20 +++++----
 .../react/src/__tests__/virtualbox.spec.js    | 42 ++++++++++++++++++-
 packages/react/src/state/field.js             |  6 ++-
 5 files changed, 63 insertions(+), 18 deletions(-)

diff --git a/packages/core/src/field.js b/packages/core/src/field.js
index 6f7a8d8c66e..1b03df4feb3 100644
--- a/packages/core/src/field.js
+++ b/packages/core/src/field.js
@@ -184,6 +184,12 @@ export class Field {
     this.notify()
   }
 
+  restore() {
+    if (this.removed) {
+      this.visible = true
+    }
+  }
+
   remove() {
     this.value = undefined
     this.visible = false
diff --git a/packages/core/src/form.js b/packages/core/src/form.js
index caac81f8947..493c8a0414f 100644
--- a/packages/core/src/form.js
+++ b/packages/core/src/form.js
@@ -382,13 +382,6 @@ export class Form {
     }
   }
 
-  removeField(name) {
-    const field = this.fields[name]
-    if (field) {
-      field.remove()
-    }
-  }
-
   setErrors(name, errors, ...args) {
     errors = toArr(errors)
     const field = this.fields[name]
diff --git a/packages/react/src/__tests__/validate.spec.js b/packages/react/src/__tests__/validate.spec.js
index 95f66cbb909..be525a2799e 100644
--- a/packages/react/src/__tests__/validate.spec.js
+++ b/packages/react/src/__tests__/validate.spec.js
@@ -58,8 +58,10 @@ test('validate in init', async () => {
   const TestComponent = () => {
     const [state, setState] = useState()
     useEffect(() => {
-      setState({
-        text: ''
+      act(() => {
+        setState({
+          text: ''
+        })
       })
     }, [])
     return (
@@ -96,8 +98,10 @@ test('validate in editable false', async () => {
   const TestComponent = () => {
     const [state, setState] = useState()
     useEffect(() => {
-      setState({
-        editable: ''
+      act(() => {
+        setState({
+          editable: ''
+        })
       })
     }, [])
     return (
@@ -210,9 +214,9 @@ test('modify validate rules by setFieldState', async () => {
   const { queryByText, queryAllByText, queryByTestId } = render(
     <TestComponent />
   )
-  await sleep(33)
+  await sleep(100)
   fireEvent.click(queryAllByText('Submit')[1])
-  await sleep(33)
+  await sleep(100)
   expect(queryByText('required')).toBeVisible()
   actions.setFieldState('bb', state => {
     state.rules = [
@@ -223,11 +227,11 @@ test('modify validate rules by setFieldState', async () => {
       }
     ]
   })
-  await sleep(33)
+  await sleep(100)
   fireEvent.change(queryByTestId('test-input'), {
     target: { value: '123' }
   })
-  await sleep(33)
+  await sleep(100)
   expect(queryByText('must have 6 numbers')).toBeVisible()
 })
 
diff --git a/packages/react/src/__tests__/virtualbox.spec.js b/packages/react/src/__tests__/virtualbox.spec.js
index 4e1c1d107d5..7d817c297ae 100644
--- a/packages/react/src/__tests__/virtualbox.spec.js
+++ b/packages/react/src/__tests__/virtualbox.spec.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import SchemaForm, {
   Field,
   registerFormField,
@@ -6,7 +6,7 @@ import SchemaForm, {
   connect,
   registerFieldMiddleware
 } from '../index'
-import { render } from 'react-testing-library'
+import { render, fireEvent, act } from 'react-testing-library'
 
 let FormCard
 
@@ -33,6 +33,10 @@ beforeEach(() => {
     'string',
     connect()(props => <input {...props} value={props.value || ''} />)
   )
+  registerFormField(
+    'text',
+    connect()(props => <div>This is Text Component</div>)
+  )
   FormCard = createVirtualBox('card', ({ children }) => {
     return <div>card content{children}</div>
   })
@@ -55,3 +59,37 @@ test('createVirtualBox', async () => {
   await sleep(100)
   expect(queryByText('card content')).toBeVisible()
 })
+
+test('dynamic node', async () => {
+  const TestComponent = () => {
+    const [editable, setEditable] = useState(false)
+    return (
+      <SchemaForm editable={editable}>
+        {editable && (
+          <FormCard>
+            <Field name='aaa' type='string' />
+          </FormCard>
+        )}
+        <FormCard>
+          <Field name='bbb' type='text' />
+        </FormCard>
+        <button
+          onClick={() => {
+            act(() => {
+              setEditable(true)
+            })
+          }}
+        >
+          Change Editable
+        </button>
+      </SchemaForm>
+    )
+  }
+
+  const { queryAllByText, queryByText } = render(<TestComponent />)
+
+  await sleep(33)
+  fireEvent.click(queryAllByText('Change Editable')[1])
+  await sleep(100)
+  expect(queryByText('This is Text Component')).toBeVisible()
+})
diff --git a/packages/react/src/state/field.js b/packages/react/src/state/field.js
index ef9b18f5443..f220d5dc573 100644
--- a/packages/react/src/state/field.js
+++ b/packages/react/src/state/field.js
@@ -47,8 +47,12 @@ const StateField = createHOC((options, Field) => {
       this.field.remove()
     }
 
-    componentDidUpdate(prevProps) {
+    componentDidMount() {
       this.unmounted = false
+      this.field.restore()
+    }
+
+    componentDidUpdate(prevProps) {
       if (!isEqual(this.props.schema, prevProps.schema, filterSchema)) {
         this.field.changeProps(this.props.schema)
       }