fix(Popover): can not scroll inside popup (#10949)

* fix(Popover): can not scroll inside popup

* fix: ref

packages/vant/package.json

@@ -46,7 +46,7 @@
   "dependencies": {
     "@vant/icons": "^1.8.0",
     "@vant/popperjs": "^1.2.1",
-    "@vant/use": "^1.4.1"
+    "@vant/use": "^1.4.2"
   },
   "peerDependencies": {
     "vue": "^3.0.0"

packages/vant/src/composables/use-lock-scroll.ts

@@ -12,11 +12,13 @@ export function useLockScroll(
   shouldLock: () => boolean
 ) {
   const touch = useTouch();
+  const DIRECTION_UP = '01';
+  const DIRECTION_DOWN = '10';
 
   const onTouchMove = (event: TouchEvent) => {
     touch.move(event);
 
-    const direction = touch.deltaY.value > 0 ? '10' : '01';
+    const direction = touch.deltaY.value > 0 ? DIRECTION_DOWN : DIRECTION_UP;
     const el = getScrollParent(
       event.target as Element,
       rootRef.value

packages/vant/src/popover/Popover.tsx

@@ -3,6 +3,7 @@ import {
   watch,
   nextTick,
   onMounted,
+  watchEffect,
   onBeforeUnmount,
   defineComponent,
   type PropType,
@@ -90,6 +91,7 @@ export default defineComponent({
   setup(props, { emit, slots, attrs }) {
     let popper: Instance | null;
 
+    const popupRef = ref<HTMLElement>();
     const wrapperRef = ref<HTMLElement>();
     const popoverRef = ref<ComponentInstance>();
 
@@ -144,11 +146,6 @@ export default defineComponent({
       }
     };
 
-    const onTouchstart = (event: TouchEvent) => {
-      event.stopPropagation();
-      emit('touchstart', event);
-    };
-
     const onClickAction = (action: PopoverAction, index: number) => {
       if (action.disabled) {
         return;
@@ -163,6 +160,7 @@ export default defineComponent({
 
     const onClickAway = () => {
       if (
+        props.show &&
         props.closeOnClickOutside &&
         (!props.overlay || props.closeOnClickOverlay)
       ) {
@@ -203,7 +201,13 @@ export default defineComponent({
       );
     };
 
-    onMounted(updateLocation);
+    onMounted(() => {
+      updateLocation();
+      watchEffect(() => {
+        popupRef.value = popoverRef.value?.popupRef.value;
+      });
+    });
+
     onBeforeUnmount(() => {
       if (popper) {
         popper.destroy();
@@ -213,7 +217,9 @@ export default defineComponent({
 
     watch(() => [props.show, props.offset, props.placement], updateLocation);
 
-    useClickAway(wrapperRef, onClickAway, { eventName: 'touchstart' });
+    useClickAway([wrapperRef, popupRef], onClickAway, {
+      eventName: 'touchstart',
+    });
 
     return () => (
       <>
@@ -226,7 +232,6 @@ export default defineComponent({
           position={''}
           transition="van-popover-zoom"
           lockScroll={false}
-          onTouchstart={onTouchstart}
           onUpdate:show={updateShow}
           {...attrs}
           {...pick(props, popupProps)}