fix: reduce passive event warning of touchmove event (#10975)

packages/vant/src/field/Field.tsx

@@ -26,6 +26,7 @@ import {
   makeStringProp,
   makeNumericProp,
   createNamespace,
+  type ComponentInstance,
 } from '../utils';
 import {
   cutString,
@@ -42,7 +43,11 @@ import {
 import { cellSharedProps } from '../cell/Cell';
 
 // Composables
-import { CUSTOM_FIELD_INJECTION_KEY, useParent } from '@vant/use';
+import {
+  useParent,
+  useEventListener,
+  CUSTOM_FIELD_INJECTION_KEY,
+} from '@vant/use';
 import { useId } from '../composables/use-id';
 import { useExpose } from '../composables/use-expose';
 
@@ -145,6 +150,7 @@ export default defineComponent({
     });
 
     const inputRef = ref<HTMLInputElement>();
+    const clearIconRef = ref<ComponentInstance>();
     const customValue = ref<() => unknown>();
 
     const { parent: form } = useParent(FORM_KEY);
@@ -354,7 +360,7 @@ export default defineComponent({
     const onClickRightIcon = (event: MouseEvent) =>
       emit('click-right-icon', event);
 
-    const onClear = (event: MouseEvent) => {
+    const onClear = (event: TouchEvent) => {
       preventDefault(event);
       emit('update:modelValue', '');
       emit('clear', event);
@@ -527,9 +533,9 @@ export default defineComponent({
         {renderInput()}
         {showClear.value && (
           <Icon
+            ref={clearIconRef}
             name={props.clearIcon}
             class={bem('clear')}
-            onTouchstart={onClear}
           />
         )}
         {renderRightIcon()}
@@ -569,6 +575,11 @@ export default defineComponent({
       nextTick(adjustTextareaSize);
     });
 
+    // useEventListener will set passive to `false` to eliminate the warning of Chrome
+    useEventListener('touchstart', onClear, {
+      target: computed(() => clearIconRef.value?.$el),
+    });
+
     return () => {
       const disabled = getProp('disabled');
       const labelAlign = getProp('labelAlign');

packages/vant/src/field/demo/CustomType.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import VanField from '..';
+import VanForm from '../../form';
 import VanCellGroup from '../../cell-group';
 import { ref } from 'vue';
 import { useTranslate } from '../../../docs/site';
@@ -43,35 +44,39 @@ const password = ref('');
 <template>
   <demo-block :title="t('customType')">
     <van-cell-group inset>
-      <van-field
+      <van-form>
-        v-model="text"
+        <van-field
-        :label="t('text')"
+          v-model="text"
-        :placeholder="t('textPlaceholder')"
+          :label="t('text')"
-      />
+          :placeholder="t('textPlaceholder')"
-      <van-field
+          autocomplete="off"
-        v-model="phone"
+        />
-        type="tel"
+        <van-field
-        :label="t('phone')"
+          v-model="phone"
-        :placeholder="t('phonePlaceholder')"
+          type="tel"
-      />
+          :label="t('phone')"
-      <van-field
+          :placeholder="t('phonePlaceholder')"
-        v-model="digit"
+        />
-        type="digit"
+        <van-field
-        :label="t('digit')"
+          v-model="digit"
-        :placeholder="t('digitPlaceholder')"
+          type="digit"
-      />
+          :label="t('digit')"
-      <van-field
+          :placeholder="t('digitPlaceholder')"
-        v-model="number"
+        />
-        type="number"
+        <van-field
-        :label="t('number')"
+          v-model="number"
-        :placeholder="t('numberPlaceholder')"
+          type="number"
-      />
+          :label="t('number')"
-      <van-field
+          :placeholder="t('numberPlaceholder')"
-        v-model="password"
+        />
-        type="password"
+        <van-field
-        :label="t('password')"
+          v-model="password"
-        :placeholder="t('passwordPlaceholder')"
+          type="password"
-      />
+          :label="t('password')"
+          :placeholder="t('passwordPlaceholder')"
+          autocomplete="off"
+        />
+      </van-form>
     </van-cell-group>
   </demo-block>
 </template>

packages/vant/src/field/test/__snapshots__/demo.spec.ts.snap

@@ -26,103 +26,107 @@ exports[`should render demo and match snapshot 1`] = `
 </div>
 <div>
   <div class="van-cell-group van-cell-group--inset">
-    <div class="van-cell van-field">
+    <form class="van-form">
-      <div class="van-cell__title van-field__label">
+      <div class="van-cell van-field">
-        <label id="van-field-label"
+        <div class="van-cell__title van-field__label">
-               for="van-field-input"
+          <label id="van-field-label"
-        >
+                 for="van-field-input"
-          Text
-        </label>
-      </div>
-      <div class="van-cell__value van-field__value">
-        <div class="van-field__body">
-          <input type="text"
-                 id="van-field-input"
-                 class="van-field__control"
-                 placeholder="Text"
-                 aria-labelledby="van-field-label"
           >
+            Text
+          </label>
+        </div>
+        <div class="van-cell__value van-field__value">
+          <div class="van-field__body">
+            <input type="text"
+                   id="van-field-input"
+                   class="van-field__control"
+                   placeholder="Text"
+                   autocomplete="off"
+                   aria-labelledby="van-field-label"
+            >
+          </div>
         </div>
       </div>
-    </div>
+      <div class="van-cell van-field">
-    <div class="van-cell van-field">
+        <div class="van-cell__title van-field__label">
-      <div class="van-cell__title van-field__label">
+          <label id="van-field-label"
-        <label id="van-field-label"
+                 for="van-field-input"
-               for="van-field-input"
-        >
-          Phone
-        </label>
-      </div>
-      <div class="van-cell__value van-field__value">
-        <div class="van-field__body">
-          <input type="tel"
-                 id="van-field-input"
-                 class="van-field__control"
-                 placeholder="Phone"
-                 aria-labelledby="van-field-label"
           >
+            Phone
+          </label>
+        </div>
+        <div class="van-cell__value van-field__value">
+          <div class="van-field__body">
+            <input type="tel"
+                   id="van-field-input"
+                   class="van-field__control"
+                   placeholder="Phone"
+                   aria-labelledby="van-field-label"
+            >
+          </div>
         </div>
       </div>
-    </div>
+      <div class="van-cell van-field">
-    <div class="van-cell van-field">
+        <div class="van-cell__title van-field__label">
-      <div class="van-cell__title van-field__label">
+          <label id="van-field-label"
-        <label id="van-field-label"
+                 for="van-field-input"
-               for="van-field-input"
-        >
-          Digit
-        </label>
-      </div>
-      <div class="van-cell__value van-field__value">
-        <div class="van-field__body">
-          <input type="tel"
-                 inputmode="numeric"
-                 id="van-field-input"
-                 class="van-field__control"
-                 placeholder="Digit"
-                 aria-labelledby="van-field-label"
           >
+            Digit
+          </label>
+        </div>
+        <div class="van-cell__value van-field__value">
+          <div class="van-field__body">
+            <input type="tel"
+                   inputmode="numeric"
+                   id="van-field-input"
+                   class="van-field__control"
+                   placeholder="Digit"
+                   aria-labelledby="van-field-label"
+            >
+          </div>
         </div>
       </div>
-    </div>
+      <div class="van-cell van-field">
-    <div class="van-cell van-field">
+        <div class="van-cell__title van-field__label">
-      <div class="van-cell__title van-field__label">
+          <label id="van-field-label"
-        <label id="van-field-label"
+                 for="van-field-input"
-               for="van-field-input"
-        >
-          Number
-        </label>
-      </div>
-      <div class="van-cell__value van-field__value">
-        <div class="van-field__body">
-          <input type="text"
-                 inputmode="decimal"
-                 id="van-field-input"
-                 class="van-field__control"
-                 placeholder="Number"
-                 aria-labelledby="van-field-label"
           >
+            Number
+          </label>
+        </div>
+        <div class="van-cell__value van-field__value">
+          <div class="van-field__body">
+            <input type="text"
+                   inputmode="decimal"
+                   id="van-field-input"
+                   class="van-field__control"
+                   placeholder="Number"
+                   aria-labelledby="van-field-label"
+            >
+          </div>
         </div>
       </div>
-    </div>
+      <div class="van-cell van-field">
-    <div class="van-cell van-field">
+        <div class="van-cell__title van-field__label">
-      <div class="van-cell__title van-field__label">
+          <label id="van-field-label"
-        <label id="van-field-label"
+                 for="van-field-input"
-               for="van-field-input"
-        >
-          Password
-        </label>
-      </div>
-      <div class="van-cell__value van-field__value">
-        <div class="van-field__body">
-          <input type="password"
-                 id="van-field-input"
-                 class="van-field__control"
-                 placeholder="Password"
-                 aria-labelledby="van-field-label"
           >
+            Password
+          </label>
+        </div>
+        <div class="van-cell__value van-field__value">
+          <div class="van-field__body">
+            <input type="password"
+                   id="van-field-input"
+                   class="van-field__control"
+                   placeholder="Password"
+                   autocomplete="off"
+                   aria-labelledby="van-field-label"
+            >
+          </div>
         </div>
       </div>
-    </div>
+    </form>
   </div>
 </div>
 <div>

packages/vant/src/image-preview/ImagePreviewItem.tsx

@@ -1,4 +1,5 @@
 import {
+  ref,
   watch,
   computed,
   reactive,
@@ -13,10 +14,12 @@ import {
   preventDefault,
   createNamespace,
   makeRequiredProp,
+  type ComponentInstance,
 } from '../utils';
 
 // Composables
 import { useTouch } from '../composables/use-touch';
+import { useEventListener } from '@vant/use';
 
 // Components
 import { Image } from '../image';
@@ -57,6 +60,7 @@ export default defineComponent({
     });
 
     const touch = useTouch();
+    const swipeItem = ref<ComponentInstance>();
 
     const vertical = computed(() => {
       const { rootWidth, rootHeight } = props;
@@ -271,6 +275,11 @@ export default defineComponent({
       }
     );
 
+    // useEventListener will set passive to `false` to eliminate the warning of Chrome
+    useEventListener('touchmove', onTouchMove, {
+      target: computed(() => swipeItem.value?.$el),
+    });
+
     return () => {
       const imageSlots = {
         loading: () => <Loading type="spinner" />,
@@ -278,9 +287,9 @@ export default defineComponent({
 
       return (
         <SwipeItem
+          ref={swipeItem}
           class={bem('swipe-item')}
           onTouchstartPassive={onTouchStart}
-          onTouchmove={onTouchMove}
           onTouchend={onTouchEnd}
           onTouchcancel={onTouchEnd}
         >

packages/vant/src/index-bar/IndexBar.tsx

@@ -77,6 +77,7 @@ export default defineComponent({
 
   setup(props, { emit, slots }) {
     const root = ref<HTMLElement>();
+    const sidebar = ref<HTMLElement>();
     const activeAnchor = ref<Numeric>('');
 
     const touch = useTouch();
@@ -272,11 +273,11 @@ export default defineComponent({
 
     const renderSidebar = () => (
       <div
+        ref={sidebar}
         class={bem('sidebar')}
         style={sidebarStyle.value}
         onClick={onClickSidebar}
         onTouchstartPassive={touch.start}
-        onTouchmove={onTouchMove}
       >
         {renderIndexes()}
       </div>
@@ -284,6 +285,11 @@ export default defineComponent({
 
     useExpose({ scrollTo });
 
+    // useEventListener will set passive to `false` to eliminate the warning of Chrome
+    useEventListener('touchmove', onTouchMove, {
+      target: sidebar,
+    });
+
     return () => (
       <div ref={root} class={bem()}>
         {props.teleport ? (

packages/vant/src/overlay/Overlay.tsx

@@ -1,12 +1,14 @@
 import {
+  ref,
   Transition,
   defineComponent,
   type PropType,
   type CSSProperties,
   type ExtractPropTypes,
 } from 'vue';
+
+// Utils
 import {
-  noop,
   isDef,
   extend,
   truthProp,
@@ -16,6 +18,9 @@ import {
   createNamespace,
   getZIndexStyle,
 } from '../utils';
+
+// Composables
+import { useEventListener } from '@vant/use';
 import { useLazyRender } from '../composables/use-lazy-render';
 
 const [name, bem] = createNamespace('overlay');
@@ -38,10 +43,13 @@ export default defineComponent({
   props: overlayProps,
 
   setup(props, { slots }) {
+    const root = ref<HTMLElement>();
     const lazyRender = useLazyRender(() => props.show || !props.lazyRender);
 
-    const preventTouchMove = (event: TouchEvent) => {
+    const onTouchMove = (event: TouchEvent) => {
-      preventDefault(event, true);
+      if (props.lockScroll) {
+        preventDefault(event, true);
+      }
     };
 
     const renderOverlay = lazyRender(() => {
@@ -57,15 +65,20 @@ export default defineComponent({
       return (
         <div
           v-show={props.show}
+          ref={root}
           style={style}
           class={[bem(), props.className]}
-          onTouchmove={props.lockScroll ? preventTouchMove : noop}
         >
           {slots.default?.()}
         </div>
       );
     });
 
+    // useEventListener will set passive to `false` to eliminate the warning of Chrome
+    useEventListener('touchmove', onTouchMove, {
+      target: root,
+    });
+
     return () => (
       <Transition v-slots={{ default: renderOverlay }} name="van-fade" appear />
     );

packages/vant/src/picker/Picker.tsx

@@ -22,7 +22,7 @@ import {
 } from '../utils';
 
 // Composables
-import { useChildren } from '@vant/use';
+import { useChildren, useEventListener } from '@vant/use';
 import { useExpose } from '../composables/use-expose';
 
 // Components
@@ -88,6 +88,7 @@ export default defineComponent({
     }
 
     const hasOptions = ref(false);
+    const columnsRef = ref<HTMLElement>();
     const formattedColumns = ref<PickerObjectColumn[]>([]);
 
     const columnsFieldNames = computed(() => {
@@ -380,11 +381,7 @@ export default defineComponent({
       const wrapHeight = itemHeight.value * +props.visibleItemCount;
       const columnsStyle = { height: `${wrapHeight}px` };
       return (
-        <div
+        <div ref={columnsRef} class={bem('columns')} style={columnsStyle}>
-          class={bem('columns')}
-          style={columnsStyle}
-          onTouchmove={preventDefault}
-        >
           {renderColumnItems()}
           {renderMask(wrapHeight)}
         </div>
@@ -393,6 +390,11 @@ export default defineComponent({
 
     watch(() => props.columns, format, { immediate: true });
 
+    // useEventListener will set passive to `false` to eliminate the warning of Chrome
+    useEventListener('touchmove', preventDefault, {
+      target: columnsRef,
+    });
+
     useExpose<PickerExpose>({
       confirm,
       getValues,

packages/vant/src/picker/PickerColumn.tsx

@@ -15,7 +15,7 @@ import {
 } from '../utils';
 
 // Composables
-import { useParent } from '@vant/use';
+import { useEventListener, useParent } from '@vant/use';
 import { useTouch } from '../composables/use-touch';
 import { useExpose } from '../composables/use-expose';
 
@@ -67,6 +67,7 @@ export default defineComponent({
     let momentumOffset: number;
     let transitionEndTrigger: null | (() => void);
 
+    const root = ref<HTMLElement>();
     const wrapper = ref<HTMLElement>();
 
     const state = reactive({
@@ -305,11 +306,16 @@ export default defineComponent({
       (value) => setIndex(value)
     );
 
+    // useEventListener will set passive to `false` to eliminate the warning of Chrome
+    useEventListener('touchmove', onTouchMove, {
+      target: root,
+    });
+
     return () => (
       <div
+        ref={root}
         class={[bem(), props.className]}
         onTouchstartPassive={onTouchStart}
-        onTouchmove={onTouchMove}
         onTouchend={onTouchEnd}
         onTouchcancel={onTouchEnd}
       >

packages/vant/src/rate/Rate.tsx

@@ -13,7 +13,7 @@ import {
 } from '../utils';
 
 // Composables
-import { useRect, useCustomFieldValue } from '@vant/use';
+import { useRect, useCustomFieldValue, useEventListener } from '@vant/use';
 import { useRefs } from '../composables/use-refs';
 import { useTouch } from '../composables/use-touch';
 
@@ -268,6 +268,11 @@ export default defineComponent({
 
     useCustomFieldValue(() => props.modelValue);
 
+    // useEventListener will set passive to `false` to eliminate the warning of Chrome
+    useEventListener('touchmove', onTouchMove, {
+      target: groupRef,
+    });
+
     return () => (
       <div
         ref={groupRef}
@@ -280,7 +285,6 @@ export default defineComponent({
         aria-disabled={props.disabled}
         aria-readonly={props.readonly}
         onTouchstartPassive={onTouchStart}
-        onTouchmove={onTouchMove}
       >
         {list.value.map(renderStar)}
       </div>

packages/vant/src/slider/Slider.tsx

@@ -21,7 +21,7 @@ import {
 } from '../utils';
 
 // Composables
-import { useRect, useCustomFieldValue } from '@vant/use';
+import { useRect, useCustomFieldValue, useEventListener } from '@vant/use';
 import { useTouch } from '../composables/use-touch';
 
 const [name, bem] = createNamespace('slider');
@@ -64,6 +64,7 @@ export default defineComponent({
     let startValue: SliderValue;
 
     const root = ref<HTMLElement>();
+    const slider = ref<HTMLElement>();
     const dragStatus = ref<'start' | 'dragging' | ''>();
     const touch = useTouch();
 
@@ -292,6 +293,7 @@ export default defineComponent({
 
       return (
         <div
+          ref={slider}
           role="slider"
           class={getButtonClassName(index)}
           tabindex={props.disabled ? undefined : 0}
@@ -308,7 +310,6 @@ export default defineComponent({
             }
             onTouchStart(event);
           }}
-          onTouchmove={onTouchMove}
           onTouchend={onTouchEnd}
           onTouchcancel={onTouchEnd}
           onClick={stopPropagation}
@@ -322,6 +323,11 @@ export default defineComponent({
     updateValue(props.modelValue);
     useCustomFieldValue(() => props.modelValue);
 
+    // useEventListener will set passive to `false` to eliminate the warning of Chrome
+    useEventListener('touchmove', onTouchMove, {
+      target: slider,
+    });
+
     return () => (
       <div
         ref={root}

packages/vant/src/swipe-cell/SwipeCell.tsx

@@ -21,7 +21,7 @@ import {
 } from '../utils';
 
 // Composables
-import { useRect, useClickAway } from '@vant/use';
+import { useRect, useClickAway, useEventListener } from '@vant/use';
 import { useTouch } from '../composables/use-touch';
 import { useExpose } from '../composables/use-expose';
 
@@ -209,6 +209,11 @@ export default defineComponent({
 
     useClickAway(root, () => onClick('outside'), { eventName: 'touchstart' });
 
+    // useEventListener will set passive to `false` to eliminate the warning of Chrome
+    useEventListener('touchmove', onTouchMove, {
+      target: root,
+    });
+
     return () => {
       const wrapperStyle = {
         transform: `translate3d(${state.offset}px, 0, 0)`,
@@ -221,7 +226,6 @@ export default defineComponent({
           class={bem()}
           onClick={getClickHandler('cell', lockClick)}
           onTouchstartPassive={onTouchStart}
-          onTouchmove={onTouchMove}
           onTouchend={onTouchEnd}
           onTouchcancel={onTouchEnd}
         >

packages/vant/src/swipe/Swipe.tsx

@@ -28,7 +28,12 @@ import {
 } from '../utils';
 
 // Composables
-import { doubleRaf, useChildren, usePageVisibility } from '@vant/use';
+import {
+  doubleRaf,
+  useChildren,
+  useEventListener,
+  usePageVisibility,
+} from '@vant/use';
 import { useTouch } from '../composables/use-touch';
 import { useExpose } from '../composables/use-expose';
 import { onPopupReopen } from '../composables/on-popup-reopen';
@@ -66,6 +71,7 @@ export default defineComponent({
 
   setup(props, { emit, slots }) {
     const root = ref<HTMLElement>();
+    const track = ref<HTMLElement>();
     const state = reactive<SwipeState>({
       rect: null,
       width: 0,
@@ -435,13 +441,18 @@ export default defineComponent({
     onDeactivated(stopAutoplay);
     onBeforeUnmount(stopAutoplay);
 
+    // useEventListener will set passive to `false` to eliminate the warning of Chrome
+    useEventListener('touchmove', onTouchMove, {
+      target: track,
+    });
+
     return () => (
       <div ref={root} class={bem()}>
         <div
+          ref={track}
           style={trackStyle.value}
           class={bem('track', { vertical: props.vertical })}
           onTouchstartPassive={onTouchStart}
-          onTouchmove={onTouchMove}
           onTouchend={onTouchEnd}
           onTouchcancel={onTouchEnd}
         >