From cc60ca95927d38a29b475c6a9b73821b9599dbaa Mon Sep 17 00:00:00 2001
From: Harold Zhang <HZhang@datacolor.com>
Date: Wed, 3 Jun 2026 16:10:17 +0800
Subject: [PATCH 1/3] feat: fixed the defects the scrollbar disapear when modal
 close

---
 .../@core/ui-kit/shadcn-ui/src/ui/dialog/DialogContent.vue     | 3 ---
 .../@core/ui-kit/shadcn-ui/src/ui/dialog/DialogOverlay.vue     | 3 +++
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogContent.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogContent.vue
index f2253ba69..d435f0563 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogContent.vue
@@ -5,7 +5,6 @@ import type { ClassType } from '@vben-core/typings';
 
 import { computed, ref } from 'vue';
 
-import { useScrollLock } from '@vben-core/composables';
 import { cn } from '@vben-core/shared/utils';
 
 import { X } from '@lucide/vue';
@@ -64,8 +63,6 @@ const position = computed(() => {
   return isAppendToBody() ? 'fixed' : 'absolute';
 });
 
-useScrollLock();
-
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
 
 const contentRef = ref<InstanceType<typeof DialogContent> | null>(null);
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogOverlay.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogOverlay.vue
index aaacb1e94..995e11e0c 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogOverlay.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogOverlay.vue
@@ -3,6 +3,7 @@ import type { DialogOverlayProps } from 'reka-ui';
 
 import type { HTMLAttributes } from 'vue';
 
+import { useScrollLock } from '@vben-core/composables';
 import { cn } from '@vben-core/shared/utils';
 
 import { reactiveOmit } from '@vueuse/core';
@@ -13,6 +14,8 @@ const props = defineProps<
 >();
 
 const delegatedProps = reactiveOmit(props, 'class');
+
+useScrollLock();
 </script>
 
 <template>

From 0328594747abd46811f7ac16e805aab5a5a75b19 Mon Sep 17 00:00:00 2001
From: Harold Zhang <HZhang@datacolor.com>
Date: Wed, 3 Jun 2026 17:52:41 +0800
Subject: [PATCH 2/3] feat: fixed the overlay layer can not work with reka-ui

---
 .../shadcn-ui/src/ui/dialog/DialogOverlay.vue | 29 ++-----------------
 1 file changed, 3 insertions(+), 26 deletions(-)

diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogOverlay.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogOverlay.vue
index 995e11e0c..ac03e1226 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogOverlay.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogOverlay.vue
@@ -1,34 +1,11 @@
 <script setup lang="ts">
-import type { DialogOverlayProps } from 'reka-ui';
-
-import type { HTMLAttributes } from 'vue';
+import { inject } from 'vue';
 
 import { useScrollLock } from '@vben-core/composables';
-import { cn } from '@vben-core/shared/utils';
-
-import { reactiveOmit } from '@vueuse/core';
-import { DialogOverlay } from 'reka-ui';
-
-const props = defineProps<
-  DialogOverlayProps & { class?: HTMLAttributes['class'] }
->();
-
-const delegatedProps = reactiveOmit(props, 'class');
 
 useScrollLock();
+const id = inject('DISMISSABLE_MODAL_ID');
 </script>
-
 <template>
-  <DialogOverlay
-    data-slot="dialog-overlay"
-    v-bind="delegatedProps"
-    :class="
-      cn(
-        'z-popup bg-overlay inset-0 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed',
-        props.class,
-      )
-    "
-  >
-    <slot></slot>
-  </DialogOverlay>
+  <div :data-dismissable-modal="id" class="z-popup bg-overlay inset-0 fixed"></div>
 </template>

From d90d45a12860eb617df4178ccb1b77bc3ce3fd1a Mon Sep 17 00:00:00 2001
From: Harold Zhang <HZhang@datacolor.com>
Date: Thu, 4 Jun 2026 11:19:38 +0800
Subject: [PATCH 3/3] fix: fixed modal freeze issue

---
 .../@core/ui-kit/popup-ui/src/modal/modal.vue | 32 ++++-----------
 .../shadcn-ui/src/ui/dialog/DialogContent.vue | 40 +++++++++++--------
 .../shadcn-ui/src/ui/dialog/DialogOverlay.vue | 12 ++----
 3 files changed, 34 insertions(+), 50 deletions(-)

diff --git a/packages/@core/ui-kit/popup-ui/src/modal/modal.vue b/packages/@core/ui-kit/popup-ui/src/modal/modal.vue
index cc7a8e7ea..d60a6612a 100644
--- a/packages/@core/ui-kit/popup-ui/src/modal/modal.vue
+++ b/packages/@core/ui-kit/popup-ui/src/modal/modal.vue
@@ -1,16 +1,7 @@
 <script lang="ts" setup>
 import type { ExtendedModalApi, ModalProps } from './modal';
 
-import {
-  computed,
-  nextTick,
-  onDeactivated,
-  provide,
-  ref,
-  unref,
-  useId,
-  watch,
-} from 'vue';
+import { computed, nextTick, onDeactivated, ref, unref, watch } from 'vue';
 
 import { usePriorityValues, useSimpleLocale } from '@vben-core/composables';
 import { Expand, Shrink } from '@vben-core/icons';
@@ -53,10 +44,6 @@ const headerRef = ref();
 // @ts-expect-error unused
 const footerRef = ref();
 
-const id = useId();
-
-provide('DISMISSABLE_MODAL_ID', id);
-
 const { $t } = useSimpleLocale();
 const state = props.modalApi?.useStore?.();
 
@@ -194,15 +181,8 @@ function handleOpenAutoFocus(e: Event) {
 
 // pointer-down-outside
 function pointerDownOutside(e: Event) {
-  const target = e.target as HTMLElement;
-  const isDismissableModal = target?.dataset.dismissableModal;
-  if (
-    !closeOnClickModal.value ||
-    isDismissableModal !== id ||
-    submitting.value
-  ) {
+  if (!closeOnClickModal.value || submitting.value) {
     e.preventDefault();
-    e.stopPropagation();
   }
 }
 
@@ -211,6 +191,10 @@ function handleFocusOutside(e: Event) {
   e.stopPropagation();
 }
 
+function handleCloseAutoFocus(_e: Event) {
+  // allow reka-ui to return focus to the trigger element on close
+}
+
 const getForceMount = computed(() => {
   return !unref(destroyOnClose) && unref(firstOpened);
 });
@@ -228,7 +212,7 @@ function handleClosed() {
 </script>
 <template>
   <Dialog
-    :modal="false"
+    :modal="modal"
     :open="state?.isOpen"
     @update:open="() => (!submitting ? modalApi?.close() : undefined)"
   >
@@ -261,7 +245,7 @@ function handleClosed() {
       :z-index="zIndex"
       :overlay-blur="overlayBlur"
       close-class="top-3"
-      @close-auto-focus="handleFocusOutside"
+      @close-auto-focus="handleCloseAutoFocus"
       @closed="handleClosed"
       :close-disabled="submitting"
       @escape-key-down="escapeKeyDown"
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogContent.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogContent.vue
index d435f0563..7619eaac6 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogContent.vue
@@ -8,9 +8,13 @@ import { computed, ref } from 'vue';
 import { cn } from '@vben-core/shared/utils';
 
 import { X } from '@lucide/vue';
-import { DialogClose, DialogContent, useForwardPropsEmits } from 'reka-ui';
-
-import DialogOverlay from './DialogOverlay.vue';
+import {
+  DialogClose,
+  DialogContent,
+  DialogOverlay,
+  DialogPortal,
+  useForwardPropsEmits,
+} from 'reka-ui';
 
 const props = withDefaults(
   defineProps<
@@ -82,19 +86,21 @@ defineExpose({
 </script>
 
 <template>
-  <Teleport defer :to="appendTo">
-    <Transition name="fade">
-      <DialogOverlay
-        v-if="open && modal"
-        :style="{
-          ...(zIndex ? { zIndex } : {}),
-          position,
-          backdropFilter:
-            overlayBlur && overlayBlur > 0 ? `blur(${overlayBlur}px)` : 'none',
-        }"
-        @click="() => emits('close')"
-      />
-    </Transition>
+  <DialogPortal :to="appendTo">
+    <DialogOverlay
+      v-if="open && modal"
+      :style="{
+        ...(zIndex ? { zIndex } : {}),
+        position,
+        backdropFilter:
+          overlayBlur && overlayBlur > 0 ? `blur(${overlayBlur}px)` : 'none',
+      }"
+      :class="
+        cn(
+          'z-popup bg-overlay inset-0 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed',
+        )
+      "
+    />
     <DialogContent
       ref="contentRef"
       :style="{ ...(zIndex ? { zIndex } : {}), position }"
@@ -127,5 +133,5 @@ defineExpose({
         <X class="h-4 w-4" />
       </DialogClose>
     </DialogContent>
-  </Teleport>
+  </DialogPortal>
 </template>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogOverlay.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogOverlay.vue
index ac03e1226..23f9f9ca6 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogOverlay.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogOverlay.vue
@@ -1,11 +1,5 @@
-<script setup lang="ts">
-import { inject } from 'vue';
+<script lang="ts">
+import { DialogOverlay } from 'reka-ui';
 
-import { useScrollLock } from '@vben-core/composables';
-
-useScrollLock();
-const id = inject('DISMISSABLE_MODAL_ID');
+export default DialogOverlay;
 </script>
-<template>
-  <div :data-dismissable-modal="id" class="z-popup bg-overlay inset-0 fixed"></div>
-</template>