fix: fixed modal freeze issue

This commit is contained in:
Harold Zhang
2026-06-04 11:19:38 +08:00
parent 66077b3bcf
commit d90d45a128
3 changed files with 34 additions and 50 deletions

View File

@@ -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"