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 · Oct 27, 2023 · e66a31e · e66a31e
1 parent 43c8fd8
commit e66a31e
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 6 deletions.
diff --git 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
@@ -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