fix(Field): failed to dynamically set empty label (#11373)

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'
+        const name =
-          ? `arrow-${props.arrowDirection}`
+          props.arrowDirection && props.arrowDirection !== 'right'
-          : 'arrow';
+            ? `arrow-${props.arrowDirection}`
+            : 'arrow';
         return <Icon name={name} class={bem('right-icon')} />;
       }
     };

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 = () =>
+      const renderTitle = () => {
-        labelAlign === 'top' ? [LeftIcon, Label] : Label;
+        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,
           }}

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

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();
+});