fix(PickerGroup): only filter Comment vnode (#12402)

Co-authored-by: neverland <jait.chen@foxmail.com>

README.md

@@ -113,6 +113,7 @@ Vant 3/4 supports modern browsers and Chrome >= 51、iOS >= 10.0 (same as Vue 3)
 | [sfc-playground-vant](https://github.com/zhixiaoqiang/sfc-playground-vant) | Vant Playground |
 | [vue3-h5-template](https://github.com/yulimchen/vue3-h5-template) | Mobile project template based on Vant |
 | [vue3-vant-mobile](https://github.com/CharleeWa/vue3-vant-mobile) | Mobile project template based on Vant |
+| [vscode-common-intellisense](https://github.com/Simon-He95/vscode-common-intellisense) | A VS Code extension that provides better intellisense to Vant developers |
 
 ## Links
 

README.zh-CN.md

@@ -121,6 +121,7 @@ Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0（与 Vue 3 一
 | [sfc-playground-vant](https://github.com/zhixiaoqiang/sfc-playground-vant) | Vant Playground |
 | [vue3-h5-template](https://github.com/yulimchen/vue3-h5-template) | 基于 Vant 的移动端项目模板 |
 | [vue3-vant-mobile](https://github.com/CharleeWa/vue3-vant-mobile) | 基于 Vant 的移动端项目模板 |
+| [vscode-common-intellisense](https://github.com/Simon-He95/vscode-common-intellisense) | VS Code 扩展，为 Vant 开发者提供更好的智能感知 |
 
 ## 链接
 

packages/vant/src/picker-group/PickerGroup.tsx

@@ -1,4 +1,9 @@
-import { defineComponent, type InjectionKey, type ExtractPropTypes } from 'vue';
+import {
+  defineComponent,
+  Comment,
+  type InjectionKey,
+  type ExtractPropTypes,
+} from 'vue';
 
 // Utils
 import {
@@ -71,7 +76,10 @@ export default defineComponent({
     const onCancel = () => emit('cancel');
 
     return () => {
-      const childNodes = slots.default?.();
+      const childNodes = slots
+        .default?.()
+        ?.filter((node) => node.type !== Comment);
+
       const confirmButtonText = showNextButton()
         ? props.nextStepText
         : props.confirmButtonText;

packages/vant/src/picker-group/demo/SelectDateTime.vue

@@ -39,11 +39,13 @@ const onCancel = () => {
     @confirm="onConfirm"
     @cancel="onCancel"
   >
+    <!-- Date -->
     <van-date-picker
       v-model="currentDate"
       :min-date="minDate"
       :max-date="maxDate"
     />
+    <!-- Time -->
     <van-time-picker v-model="currentTime" />
   </van-picker-group>
 </template>

packages/vant/src/search/Search.tsx

@@ -125,7 +125,7 @@ export default defineComponent({
           v-slots={pick(slots, ['left-icon', 'right-icon'])}
           ref={fieldRef}
           type="search"
-          class={bem('field')}
+          class={bem('field', { 'with-message': fieldAttrs.errorMessage })}
           border={false}
           onBlur={onBlur}
           onFocus={onFocus}

packages/vant/src/search/index.less

@@ -48,6 +48,13 @@
     .van-field__left-icon {
       color: var(--van-search-left-icon-color);
     }
+
+    &--with-message {
+      height: auto;
+      align-items: flex-start;
+      padding-top: 5px;
+      padding-bottom: 5px;
+    }
   }
 
   &--show-action {

packages/vant/src/tab/README.md

@@ -231,6 +231,18 @@ export default {
 };
 ```
 
+> Tips: The before-change callback will not be triggered by swiping gesture.
+
+### Hide Header
+
+By setting the `showHeader` prop to `false`, the title bar of the Tabs component can be hidden. In this case, you can control the `active` prop of the Tabs using custom components.
+
+```html
+<van-tabs v-model:active="active" :show-header="false">
+  <van-tab v-for="index in 4"> content {{ index }} </van-tab>
+</van-tabs>
+```
+
 ## API
 
 ### Tabs Props
@@ -252,6 +264,7 @@ export default {
 | swipeable | Whether to enable gestures to slide left and right | _boolean_ | `false` |
 | lazy-render | Whether to enable tab content lazy render | _boolean_ | `true` |
 | scrollspy | Whether to use scrollspy mode | _boolean_ | `false` |
+| show-header `v4.7.3` | Whether to show title bar | _boolean_ | `true` |
 | offset-top | Sticky offset top , supports `px` `vw` `vh` `rem` unit, default `px` | _number \| string_ | `0` |
 | swipe-threshold | Set swipe tabs threshold | _number \| string_ | `5` |
 | title-active-color | Title active color | _string_ | - |

packages/vant/src/tab/README.zh-CN.md

@@ -244,6 +244,16 @@ export default {
 
 > Tips: 通过手势滑动不会触发 before-change 属性。
 
+### 隐藏标题栏
+
+通过将 `showHeader` 属性设置为 `false`，可以不渲染 Tabs 的标题栏。在这种情况下，你可以通过一些自定义组件来控制 Tabs 的 `active` 属性。
+
+```html
+<van-tabs v-model:active="active" :show-header="false">
+  <van-tab v-for="index in 4"> 内容 {{ index }} </van-tab>
+</van-tabs>
+```
+
 ## API
 
 ### Tabs Props
@@ -265,6 +275,7 @@ export default {
 | swipeable | 是否开启手势左右滑动切换 | _boolean_ | `false` |
 | lazy-render | 是否开启延迟渲染（首次切换到标签时才触发内容渲染） | _boolean_ | `true` |
 | scrollspy | 是否开启滚动导航 | _boolean_ | `false` |
+| show-header `v4.7.3` | 是否显示标题栏 | _boolean_ | `true` |
 | offset-top | 粘性布局下吸顶时与顶部的距离，支持 `px` `vw` `vh` `rem` 单位，默认 `px` | _number \| string_ | `0` |
 | swipe-threshold | 滚动阈值，标签数量超过阈值且总宽度超过标签栏宽度时开始横向滚动 | _number \| string_ | `5` |
 | title-active-color | 标题选中态颜色 | _string_ | - |

packages/vant/src/tab/test/index.spec.tsx

@@ -417,6 +417,26 @@ test('should allow to call scrollTo method when scrollspy is enabled', async ()
   expect(onChange).toHaveBeenCalledWith('b', 'title2');
 });
 
+test('should not render header when showHeader is false', async () => {
+  const wrapper = mount({
+    render() {
+      return (
+        <Tabs showHeader={false}>
+          <Tab title="title1">Text</Tab>
+          <Tab title="title2">Text</Tab>
+          <Tab title="title3">Text</Tab>
+          <Tab title="title4">Text</Tab>
+          <Tab title="title5">Text</Tab>
+        </Tabs>
+      );
+    },
+  });
+
+  await later();
+  const tabs = wrapper.findAll('.van-tabs__wrap,.van-sticky');
+  expect(tabs.length).toEqual(0);
+});
+
 test('should call before-change prop before changing', async () => {
   const onChange = vi.fn();
   const beforeChange = (name: number) => {

packages/vant/src/tabs/Tabs.tsx

@@ -74,6 +74,7 @@ export const tabsProps = {
   offsetTop: makeNumericProp(0),
   background: String,
   lazyRender: truthProp,
+  showHeader: truthProp,
   lineWidth: numericProp,
   lineHeight: numericProp,
   beforeChange: Function as PropType<Interceptor>,
@@ -479,17 +480,19 @@ export default defineComponent({
 
     return () => (
       <div ref={root} class={bem([props.type])}>
-        {props.sticky ? (
-          <Sticky
-            container={root.value}
-            offsetTop={offsetTopPx.value}
-            onScroll={onStickyScroll}
-          >
-            {renderHeader()}
-          </Sticky>
-        ) : (
-          renderHeader()
-        )}
+        {props.showHeader ? (
+          props.sticky ? (
+            <Sticky
+              container={root.value}
+              offsetTop={offsetTopPx.value}
+              onScroll={onStickyScroll}
+            >
+              {renderHeader()}
+            </Sticky>
+          ) : (
+            renderHeader()
+          )
+        ) : null}
         <TabsContent
           ref={contentRef}
           count={children.length}