fix: field hidden with null value (#3783)

alibaba · Apr 10, 2023 · f8c2040 · f8c2040
1 parent b458efd
commit f8c2040
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 2 deletions.
diff --git a/packages/core/src/models/Field.ts b/packages/core/src/models/Field.ts
@@ -246,7 +246,7 @@ export class Field<
         (display) => {
           const value = this.value
           if (display !== 'none') {
-            if (!isValid(value)) {
+            if (value === undefined && this.caches.value !== undefined) {
               this.setValue(this.caches.value)
               this.caches.value = undefined
             }

diff --git a/packages/react/src/__tests__/expression.spec.tsx b/packages/react/src/__tests__/expression.spec.tsx
@@ -1,7 +1,13 @@
 import React from 'react'
 import { render, waitFor } from '@testing-library/react'
 import { createForm } from '@formily/core'
-import { FormProvider, ExpressionScope, createSchemaField, useField } from '..'
+import {
+  FormProvider,
+  ExpressionScope,
+  createSchemaField,
+  useField,
+  Field,
+} from '..'
 
 test('expression scope', async () => {
   const Container = (props) => {
@@ -73,3 +79,33 @@ test('x-compile-omitted', async () => {
     expect(queryByTestId('input')?.textContent).toBe('{{fake}}123321extra')
   })
 })
+
+test('field hidden & visible', async () => {
+  const form = createForm({ initialValues: { empty: null } })
+  const { findByTestId } = render(
+    <FormProvider form={form}>
+      <div data-testid="testid">
+        <Field name="empty" component={['input']} />
+      </div>
+    </FormProvider>
+  )
+  await findByTestId('testid')
+  //
+  expect(form.fields.empty.hidden).toBe(false)
+  expect(form.fields.empty.value).toBe(null)
+  form.fields.empty.hidden = true
+  expect(form.fields.empty.hidden).toBe(true)
+  expect(form.fields.empty.value).toBe(null)
+  form.fields.empty.hidden = false
+  expect(form.fields.empty.hidden).toBe(false)
+  expect(form.fields.empty.value).toBe(null)
+  //
+  expect(form.fields.empty.visible).toBe(true)
+  expect(form.fields.empty.value).toBe(null)
+  form.fields.empty.visible = false
+  expect(form.fields.empty.visible).toBe(false)
+  expect(form.fields.empty.value).toBe(undefined)
+  form.fields.empty.visible = true
+  expect(form.fields.empty.visible).toBe(true)
+  expect(form.fields.empty.value).toBe(null)
+})