Fix: Escape closes Settings dialog if login dialog open (#4364)

src/services/dialogService.ts

@@ -272,7 +272,7 @@ export const useDialogService = () => {
           onSuccess: () => resolve(true)
         },
         dialogComponentProps: {
-          closable: false,
+          closable: true,
           onClose: () => resolve(false)
         }
       })

src/stores/dialogStore.ts

@@ -26,6 +26,8 @@ interface CustomDialogComponentProps {
   modal?: boolean
   position?: DialogPosition
   pt?: DialogPassThroughOptions
+  closeOnEscape?: boolean
+  dismissableMask?: boolean
 }
 
 type DialogComponentProps = InstanceType<typeof GlobalDialog>['$props'] &
@@ -62,6 +64,12 @@ export interface ShowDialogOptions {
 export const useDialogStore = defineStore('dialog', () => {
   const dialogStack = ref<DialogInstance[]>([])
 
+  /**
+   * The key of the currently active (top-most) dialog.
+   * Only the active dialog can be closed with the ESC key.
+   */
+  const activeKey = ref<string | null>(null)
+
   const genDialogKey = () => `dialog-${Math.random().toString(36).slice(2, 9)}`
 
   /**
@@ -87,17 +95,27 @@ export const useDialogStore = defineStore('dialog', () => {
     if (index !== -1) {
       const [dialog] = dialogStack.value.splice(index, 1)
       insertDialogByPriority(dialog)
+      activeKey.value = dialogKey
+      updateCloseOnEscapeStates()
     }
   }
 
   function closeDialog(options?: { key: string }) {
     const targetDialog = options
       ? dialogStack.value.find((d) => d.key === options.key)
-      : dialogStack.value[0]
+      : dialogStack.value.find((d) => d.key === activeKey.value)
     if (!targetDialog) return
 
     targetDialog.dialogComponentProps?.onClose?.()
-    dialogStack.value.splice(dialogStack.value.indexOf(targetDialog), 1)
+    const index = dialogStack.value.indexOf(targetDialog)
+    dialogStack.value.splice(index, 1)
+
+    activeKey.value =
+      dialogStack.value.length > 0
+        ? dialogStack.value[dialogStack.value.length - 1].key
+        : null
+
+    updateCloseOnEscapeStates()
   }
 
   function createDialog(options: {
@@ -114,7 +132,7 @@ export const useDialogStore = defineStore('dialog', () => {
       dialogStack.value.shift()
     }
 
-    const dialog: DialogInstance = {
+    const dialog = {
       key: options.key,
       visible: true,
       title: options.title,
@@ -135,7 +153,6 @@ export const useDialogStore = defineStore('dialog', () => {
         dismissableMask: true,
         ...options.dialogComponentProps,
         maximized: false,
-        // @ts-expect-error TODO: fix this
         onMaximize: () => {
           dialog.dialogComponentProps.maximized = true
         },
@@ -156,10 +173,29 @@ export const useDialogStore = defineStore('dialog', () => {
     }
 
     insertDialogByPriority(dialog)
+    activeKey.value = options.key
+    updateCloseOnEscapeStates()
 
     return dialog
   }
 
+  /**
+   * Ensures only the top-most dialog in the stack can be closed with the Escape key.
+   * This is necessary because PrimeVue Dialogs do not handle `closeOnEscape` prop
+   * correctly when multiple dialogs are open.
+   */
+  function updateCloseOnEscapeStates() {
+    const topDialog = dialogStack.value.find((d) => d.key === activeKey.value)
+    const topClosable = topDialog?.dialogComponentProps.closable
+
+    dialogStack.value.forEach((dialog) => {
+      dialog.dialogComponentProps = {
+        ...dialog.dialogComponentProps,
+        closeOnEscape: dialog === topDialog && !!topClosable
+      }
+    })
+  }
+
   function showDialog(options: ShowDialogOptions) {
     const dialogKey = options.key || genDialogKey()
 
@@ -206,6 +242,7 @@ export const useDialogStore = defineStore('dialog', () => {
     showDialog,
     closeDialog,
     showExtensionDialog,
-    isDialogOpen
+    isDialogOpen,
+    activeKey
   }
 })