From 8dcc3564c39eada6dcd86b838b06e73aa7fb5e5b Mon Sep 17 00:00:00 2001
From: "hrynevych.romann" <hrynevych.romann@gmail.com>
Date: Thu, 18 Jan 2024 22:21:37 +0200
Subject: [PATCH] fix(dialog): fix click on scrollbar close dialog bug

---
 .../registry/default/ui/dialog/DialogScrollContent.vue   | 9 +++++++++
 .../registry/new-york/ui/dialog/DialogScrollContent.vue  | 9 +++++++++
 apps/www/src/public/registry/styles/default/dialog.json  | 2 +-
 apps/www/src/public/registry/styles/new-york/dialog.json | 2 +-
 4 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/apps/www/src/lib/registry/default/ui/dialog/DialogScrollContent.vue b/apps/www/src/lib/registry/default/ui/dialog/DialogScrollContent.vue
index 275020bb..509550c9 100644
--- a/apps/www/src/lib/registry/default/ui/dialog/DialogScrollContent.vue
+++ b/apps/www/src/lib/registry/default/ui/dialog/DialogScrollContent.vue
@@ -9,12 +9,20 @@ import {
   useEmitAsProps,
 } from 'radix-vue'
 import { X } from 'lucide-vue-next'
+import type { PointerDownOutsideEvent } from 'radix-vue/dist/DismissableLayer'
 import { cn } from '@/lib/utils'
 
 const props = defineProps<DialogContentProps & { class?: string }>()
 const emits = defineEmits<DialogContentEmits>()
 
 const emitsAsProps = useEmitAsProps(emits)
+
+function handlePointerDown(event: PointerDownOutsideEvent) {
+  const originalEvent = event.detail.originalEvent
+  // Ignore click events on the scrollbar.
+  if (originalEvent.offsetX > originalEvent.target?.clientWidth || originalEvent.offsetY > originalEvent.target?.clientHeight)
+    event.preventDefault()
+}
 </script>
 
 <template>
@@ -30,6 +38,7 @@ const emitsAsProps = useEmitAsProps(emits)
           )
         "
         v-bind="{ ...props, ...emitsAsProps }"
+        @pointer-down-outside="handlePointerDown"
       >
         <slot />
 
diff --git a/apps/www/src/lib/registry/new-york/ui/dialog/DialogScrollContent.vue b/apps/www/src/lib/registry/new-york/ui/dialog/DialogScrollContent.vue
index 49692c21..507b35ff 100644
--- a/apps/www/src/lib/registry/new-york/ui/dialog/DialogScrollContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dialog/DialogScrollContent.vue
@@ -9,12 +9,20 @@ import {
   useEmitAsProps,
 } from 'radix-vue'
 import { Cross2Icon } from '@radix-icons/vue'
+import type { PointerDownOutsideEvent } from 'radix-vue/dist/DismissableLayer'
 import { cn } from '@/lib/utils'
 
 const props = defineProps<DialogContentProps & { class?: string }>()
 const emits = defineEmits<DialogContentEmits>()
 
 const emitsAsProps = useEmitAsProps(emits)
+
+function handlePointerDown(event: PointerDownOutsideEvent) {
+  const originalEvent = event.detail.originalEvent
+  // Ignore click events on the scrollbar.
+  if (originalEvent.offsetX > originalEvent.target?.clientWidth || originalEvent.offsetY > originalEvent.target?.clientHeight)
+    event.preventDefault()
+}
 </script>
 
 <template>
@@ -30,6 +38,7 @@ const emitsAsProps = useEmitAsProps(emits)
           )
         "
         v-bind="{ ...props, ...emitsAsProps }"
+        @pointer-down-outside="handlePointerDown"
       >
         <slot />
 
diff --git a/apps/www/src/public/registry/styles/default/dialog.json b/apps/www/src/public/registry/styles/default/dialog.json
index 507cf559..87ca2836 100644
--- a/apps/www/src/public/registry/styles/default/dialog.json
+++ b/apps/www/src/public/registry/styles/default/dialog.json
@@ -31,7 +31,7 @@
     },
     {
       "name": "DialogScrollContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useEmitAsProps,\n} from 'radix-vue'\nimport { X } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DialogContentProps & { class?: string }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    >\n      <DialogContent\n        :class=\"\n          cn(\n            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',\n            props.class,\n          )\n        \"\n        v-bind=\"{ ...props, ...emitsAsProps }\"\n      >\n        <slot />\n\n        <DialogClose\n          class=\"absolute top-3 right-3 p-0.5 transition-colors rounded-md hover:bg-secondary\"\n        >\n          <X class=\"w-4 h-4\" />\n          <span class=\"sr-only\">Close</span>\n        </DialogClose>\n      </DialogContent>\n    </DialogOverlay>\n  </DialogPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useEmitAsProps,\n} from 'radix-vue'\nimport { X } from 'lucide-vue-next'\nimport type { PointerDownOutsideEvent } from 'radix-vue/dist/DismissableLayer'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DialogContentProps & { class?: string }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n\nfunction handlePointerDown(event: PointerDownOutsideEvent) {\n  const originalEvent = event.detail.originalEvent\n  // Ignore click events on the scrollbar.\n  if (originalEvent.offsetX > originalEvent.target?.clientWidth || originalEvent.offsetY > originalEvent.target?.clientHeight)\n    event.preventDefault()\n}\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    >\n      <DialogContent\n        :class=\"\n          cn(\n            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',\n            props.class,\n          )\n        \"\n        v-bind=\"{ ...props, ...emitsAsProps }\"\n        @pointer-down-outside=\"handlePointerDown\"\n      >\n        <slot />\n\n        <DialogClose\n          class=\"absolute top-3 right-3 p-0.5 transition-colors rounded-md hover:bg-secondary\"\n        >\n          <X class=\"w-4 h-4\" />\n          <span class=\"sr-only\">Close</span>\n        </DialogClose>\n      </DialogContent>\n    </DialogOverlay>\n  </DialogPortal>\n</template>\n"
     },
     {
       "name": "DialogTitle.vue",
diff --git a/apps/www/src/public/registry/styles/new-york/dialog.json b/apps/www/src/public/registry/styles/new-york/dialog.json
index 4919d20c..c269599e 100644
--- a/apps/www/src/public/registry/styles/new-york/dialog.json
+++ b/apps/www/src/public/registry/styles/new-york/dialog.json
@@ -31,7 +31,7 @@
     },
     {
       "name": "DialogScrollContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useEmitAsProps,\n} from 'radix-vue'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DialogContentProps & { class?: string }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    >\n      <DialogContent\n        :class=\"\n          cn(\n            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',\n            props.class,\n          )\n        \"\n        v-bind=\"{ ...props, ...emitsAsProps }\"\n      >\n        <slot />\n\n        <DialogClose\n          class=\"absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary\"\n        >\n          <Cross2Icon class=\"w-4 h-4\" />\n          <span class=\"sr-only\">Close</span>\n        </DialogClose>\n      </DialogContent>\n    </DialogOverlay>\n  </DialogPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useEmitAsProps,\n} from 'radix-vue'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport type { PointerDownOutsideEvent } from 'radix-vue/dist/DismissableLayer'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DialogContentProps & { class?: string }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n\nfunction handlePointerDown(event: PointerDownOutsideEvent) {\n  const originalEvent = event.detail.originalEvent\n  // Ignore click events on the scrollbar.\n  if (originalEvent.offsetX > originalEvent.target?.clientWidth || originalEvent.offsetY > originalEvent.target?.clientHeight)\n    event.preventDefault()\n}\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    >\n      <DialogContent\n        :class=\"\n          cn(\n            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',\n            props.class,\n          )\n        \"\n        v-bind=\"{ ...props, ...emitsAsProps }\"\n        @pointer-down-outside=\"handlePointerDown\"\n      >\n        <slot />\n\n        <DialogClose\n          class=\"absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary\"\n        >\n          <Cross2Icon class=\"w-4 h-4\" />\n          <span class=\"sr-only\">Close</span>\n        </DialogClose>\n      </DialogContent>\n    </DialogOverlay>\n  </DialogPortal>\n</template>\n"
     },
     {
       "name": "DialogTitle.vue",