From 7f834d57eb025e782a3d548b3ae9b92083a5515d Mon Sep 17 00:00:00 2001
From: neverland <jait.chen@foxmail.com>
Date: Sat, 10 Dec 2022 21:00:36 +0800
Subject: [PATCH] fix(Field): failed to dynamically set empty label (#11373)

---
 packages/vant/src/cell/Cell.tsx                 | 17 +++++++++++++----
 packages/vant/src/field/Field.tsx               | 12 ++++++++----
 .../field/test/__snapshots__/index.spec.js.snap | 10 ++++++++++
 packages/vant/src/field/test/index.spec.js      | 13 +++++++++++++
 4 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/packages/vant/src/cell/Cell.tsx b/packages/vant/src/cell/Cell.tsx
index 1b813c5d7..c1cc9f51a 100644
--- a/packages/vant/src/cell/Cell.tsx
+++ b/packages/vant/src/cell/Cell.tsx
@@ -77,12 +77,20 @@ export default defineComponent({
 
     const renderTitle = () => {
       if (slots.title || isDef(props.title)) {
+        const titleSlot = slots.title?.();
+
+        // Allow Field to dynamically set empty label
+        // https://github.com/youzan/vant/issues/11368
+        if (Array.isArray(titleSlot) && titleSlot.length === 0) {
+          return;
+        }
+
         return (
           <div
             class={[bem('title'), props.titleClass]}
             style={props.titleStyle}
           >
-            {slots.title ? slots.title() : <span>{props.title}</span>}
+            {titleSlot || <span>{props.title}</span>}
             {renderLabel()}
           </div>
         );
@@ -125,9 +133,10 @@ export default defineComponent({
       }
 
       if (props.isLink) {
-        const name = props.arrowDirection && props.arrowDirection !== 'right'
-          ? `arrow-${props.arrowDirection}`
-          : 'arrow';
+        const name =
+          props.arrowDirection && props.arrowDirection !== 'right'
+            ? `arrow-${props.arrowDirection}`
+            : 'arrow';
         return <Icon name={name} class={bem('right-icon')} />;
       }
     };
diff --git a/packages/vant/src/field/Field.tsx b/packages/vant/src/field/Field.tsx
index 39039feda..3b48104aa 100644
--- a/packages/vant/src/field/Field.tsx
+++ b/packages/vant/src/field/Field.tsx
@@ -600,17 +600,21 @@ export default defineComponent({
     return () => {
       const disabled = getProp('disabled');
       const labelAlign = getProp('labelAlign');
-      const Label = renderLabel();
       const LeftIcon = renderLeftIcon();
 
-      const renderTitle = () =>
-        labelAlign === 'top' ? [LeftIcon, Label] : Label;
+      const renderTitle = () => {
+        const Label = renderLabel();
+        if (labelAlign === 'top') {
+          return [LeftIcon, Label].filter(Boolean);
+        }
+        return Label || [];
+      };
 
       return (
         <Cell
           v-slots={{
             icon: LeftIcon && labelAlign !== 'top' ? () => LeftIcon : null,
-            title: Label || labelAlign === 'top' ? renderTitle : null,
+            title: renderTitle,
             value: renderFieldBody,
             extra: slots.extra,
           }}
diff --git a/packages/vant/src/field/test/__snapshots__/index.spec.js.snap b/packages/vant/src/field/test/__snapshots__/index.spec.js.snap
index 9394b15b4..620efcee8 100644
--- a/packages/vant/src/field/test/__snapshots__/index.spec.js.snap
+++ b/packages/vant/src/field/test/__snapshots__/index.spec.js.snap
@@ -41,6 +41,16 @@ exports[`should render input slot correctly 1`] = `
 </div>
 `;
 
+exports[`should render label correctly when dynamically set empty label 1`] = `
+<div class="van-cell__title van-field__label">
+  <label id="van-field-label"
+         for="van-field-input"
+  >
+    abc
+  </label>
+</div>
+`;
+
 exports[`should render label slot correctly 1`] = `
 <div class="van-cell__title van-field__label">
   Custom Label
diff --git a/packages/vant/src/field/test/index.spec.js b/packages/vant/src/field/test/index.spec.js
index ff9bc7f90..ec55dae2b 100644
--- a/packages/vant/src/field/test/index.spec.js
+++ b/packages/vant/src/field/test/index.spec.js
@@ -520,3 +520,16 @@ test('should render left icon inside label when label-align is top', () => {
   });
   expect(wrapper.html()).toMatchSnapshot();
 });
+
+test('should render label correctly when dynamically set empty label', async () => {
+  const wrapper = mount(Field, {
+    props: {
+      label: 'abc',
+    },
+  });
+
+  expect(wrapper.find('.van-field__label').html()).toMatchSnapshot();
+
+  await wrapper.setProps({ label: '' });
+  expect(wrapper.find('.van-field__label').exists()).toBeFalsy();
+});