From 6b03137f12c4c5979a5740823af03ffa9fcab0d6 Mon Sep 17 00:00:00 2001 From: ydkdev Date: Wed, 19 Mar 2025 14:25:54 +0800 Subject: [PATCH] fix(useDropZone): update isOverDropZone handling when elements inside the drag area use v-if (#4652) --- packages/core/useDropZone/index.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/core/useDropZone/index.ts b/packages/core/useDropZone/index.ts index c1256b57e42..94a17ac3a2c 100644 --- a/packages/core/useDropZone/index.ts +++ b/packages/core/useDropZone/index.ts @@ -3,6 +3,7 @@ import { isClient } from '@vueuse/shared' // eslint-disable-next-line no-restricted-imports import { shallowRef, unref } from 'vue' +import { useElementHover } from '../useElementHover' import { useEventListener } from '../useEventListener' export interface UseDropZoneReturn { @@ -80,6 +81,8 @@ export function useDropZone( && !('chrome' in window) ) + const isInsideTargetElement = useElementHover(target) + const handleDragEvent = (event: DragEvent, eventType: 'enter' | 'over' | 'leave' | 'drop') => { const dataTransferItemList = event.dataTransfer?.items isValid = (dataTransferItemList && checkValidity(dataTransferItemList)) ?? false @@ -113,7 +116,7 @@ export function useDropZone( break case 'leave': counter -= 1 - if (counter === 0) + if (counter === 0 || !isInsideTargetElement.value) isOverDropZone.value = false _options.onLeave?.(null, event) break