fix(DismissableLayer): invalid coords check in `usePointerDownOutside…

…` composable (#695) * fix: invalid coords check in composable * chore: add story --------- Co-authored-by: zernonia <[email protected]>
unovue · Feb 19, 2024 · 356ee29 · 356ee29
1 parent 55113ab
commit 356ee29
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 3 deletions.
diff --git a/packages/radix-vue/src/DismissableLayer/story/DismissableLayerDialog.story.vue b/packages/radix-vue/src/DismissableLayer/story/DismissableLayerDialog.story.vue
@@ -1,10 +1,14 @@
 <script setup lang="ts">
 import DummyDialog from './_DummyDialog.vue'
 import DummyPopover from './_DummyPopover.vue'
+import { DismissableLayer } from '../'
+import { ref } from 'vue'
 
 function handleAlert() {
   window.alert('Alert')
 }
+
+const open = ref(false)
 </script>
 
 <template>
@@ -84,5 +88,30 @@ function handleAlert() {
         </div>
       </div>
     </Variant>
+    <Variant title="Dialog (with scrollbar)">
+      <div class="flex flex-col gap-4">
+        <button
+          class="py-2 rounded bg-gray-500 focus:outline focus:outline-blue-500"
+          type="button"
+          @click="open = !open"
+        >
+          Open layer
+        </button>
+
+        <template v-if="open">
+          <Teleport to="body">
+            <div
+              class="fixed top-0 left-0 bottom-0 right-0 pointer-event-none bg-black/30 flex items-center justify-center overflow-y-auto"
+            >
+              <DismissableLayer @dismiss="open = false">
+                <div class="h-[200vh] text-white flex items-center justify-center p-16 bg-gray-700">
+                  Long content. Clicking on scrollbar shouldn't dismiss the layer
+                </div>
+              </DismissableLayer>
+            </div>
+          </Teleport>
+        </template>
+      </div>
+    </Variant>
   </Story>
 </template>
diff --git a/packages/radix-vue/src/DismissableLayer/story/_DummyDialog.vue b/packages/radix-vue/src/DismissableLayer/story/_DummyDialog.vue
@@ -21,7 +21,7 @@ const open = ref(false)
     {{ openLabel }}
   </button>
 
-  <div v-if="open">
+  <template v-if="open">
     <FocusGuards>
       <Teleport to="body">
         <div
@@ -48,5 +48,5 @@ const open = ref(false)
         </DismissableLayer>
       </Teleport>
     </FocusGuards>
-  </div>
+  </template>
 </template>
diff --git a/packages/radix-vue/src/DismissableLayer/utils.ts b/packages/radix-vue/src/DismissableLayer/utils.ts
@@ -62,7 +62,7 @@ export function usePointerDownOutside(
         return
       }
 
-      if (event.offsetX > target.clientWidth || event.offsetY > target.clientHeight)
+      if (event.clientX > target.clientWidth || event.clientY > target.clientHeight)
         return
 
       if (event.target && !isPointerInsideDOMTree.value) {
-Original file line number
+Diff line change
@@ Expand Up / @@ -62,7 +62,7 @@ export function usePointerDownOutside( @@
             return
           }
-          if (event.offsetX > target.clientWidth || event.offsetY > target.clientHeight)
+          if (event.clientX > target.clientWidth || event.clientY > target.clientHeight)
             return
           if (event.target && !isPointerInsideDOMTree.value) {
@@ Expand Down @@