From e66a31e0473d645775a5a29af6156278da0899fa Mon Sep 17 00:00:00 2001
From: zernonia <59365435+zernonia@users.noreply.github.com>
Date: Fri, 27 Oct 2023 22:41:17 +0800
Subject: [PATCH] fix: combobox and some components closed the modal
 prematurely (#475)

* fix: combobox and other element closed the modal prematurely

* fix: dismissable not setting correct pointer events
---
 .../radix-vue/src/DismissableLayer/DismissableLayer.vue    | 2 +-
 packages/radix-vue/src/DismissableLayer/utils.ts           | 7 ++-----
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/packages/radix-vue/src/DismissableLayer/DismissableLayer.vue b/packages/radix-vue/src/DismissableLayer/DismissableLayer.vue
index 0627a97ce..9ceb9a3b2 100644
--- a/packages/radix-vue/src/DismissableLayer/DismissableLayer.vue
+++ b/packages/radix-vue/src/DismissableLayer/DismissableLayer.vue
@@ -132,10 +132,10 @@ onKeyStroke('Escape', (event) => {
     emits('dismiss')
 })
 
+let originalBodyPointerEvents: string
 watchEffect((cleanupFn) => {
   if (!layerElement.value)
     return
-  let originalBodyPointerEvents: string
   if (props.disableOutsidePointerEvents) {
     if (context.layersWithOutsidePointerEventsDisabled.size === 0) {
       originalBodyPointerEvents = ownerDocument.value.body.style.pointerEvents
diff --git a/packages/radix-vue/src/DismissableLayer/utils.ts b/packages/radix-vue/src/DismissableLayer/utils.ts
index aa134d578..16a9ec3f0 100644
--- a/packages/radix-vue/src/DismissableLayer/utils.ts
+++ b/packages/radix-vue/src/DismissableLayer/utils.ts
@@ -21,14 +21,12 @@ function isLayerExist(layerElement: HTMLElement, targetElement: HTMLElement) {
     '[data-dismissable-layer]',
   ) as HTMLElement
 
-  if (!mainLayer)
-    return false
-
   const nodeList = Array.from(
     layerElement.ownerDocument.querySelectorAll('[data-dismissable-layer]'),
   )
   if (
-    mainLayer === targetLayer
+    (targetLayer
+    && mainLayer === targetLayer)
     || nodeList.indexOf(mainLayer) < nodeList.indexOf(targetLayer)
   )
     return true
@@ -57,7 +55,6 @@ export function usePointerDownOutside(
       if (!element?.value)
         return
 
-      await nextTick()
       if (isLayerExist(element.value, event.target as HTMLElement)) {
         isPointerInsideDOMTree.value = false
         return