Merge pull request #387 from nextcloud/fix/modal-focus-trap-loop

Fix dialog not appearing when another modal is open

Author: ChristophWurst

CHANGELOG.md

@@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file.
 
 ## Unreleased
 
+### Fixed
+
+- Fix dialog not appearing when another modal is open
+
 ## 3.0.0 - 2022-09-07
 
 ### Breaking

l10n/messages.pot

@@ -2,26 +2,26 @@ msgid ""
 msgstr ""
 "Content-Type: text/plain; charset=UTF-8\n"
 
-#: src/components/Dialog.vue:83
+#: src/components/Dialog.vue:84
 msgid "Authentication required"
 msgstr ""
 
-#: src/components/Dialog.vue:87
+#: src/components/Dialog.vue:88
 msgid "Confirm"
 msgstr ""
 
-#: src/components/Dialog.vue:86
+#: src/components/Dialog.vue:87
 msgid "Failed to authenticate, please try again"
 msgstr ""
 
-#: src/components/Dialog.vue:85
+#: src/components/Dialog.vue:86
 msgid "Password"
 msgstr ""
 
 #: src/main.ts:21
 msgid "Password confirmation dialog already mounted"
 msgstr ""
 
-#: src/components/Dialog.vue:84
+#: src/components/Dialog.vue:85
 msgid "This action requires you to confirm your password"
 msgstr ""

package-lock.json

@@ -30,7 +30,7 @@
     "@nextcloud/capabilities": "^1.0.4",
     "@nextcloud/l10n": "^1.6.0",
     "@nextcloud/router": "^2.0.0",
-    "@nextcloud/vue": "^7.0.0-beta.0",
+    "@nextcloud/vue": "^7.0.0-beta.2",
     "vue": "^2.7.10"
   },
   "devDependencies": {

package.json

@@ -24,6 +24,7 @@
   <NcModal :id="dialogId"
     class="dialog"
     size="small"
+    :container="null"
     @close="close">
     <div class="dialog__container">
       <h2 class="dialog__title">{{ titleText }}</h2>

src/components/Dialog.vue

@@ -1 +1,2 @@
 export const DIALOG_ID = 'password-confirmation-dialog'
+export const MODAL_CLASS = 'modal-mask' // NcModal component root class https://github.com/nextcloud/nextcloud-vue/blob/v7.0.0-beta.2/src/components/NcModal/NcModal.vue

src/globals.ts

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import DialogComponent from './components/Dialog.vue'
-import { DIALOG_ID } from './globals.js'
+import { DIALOG_ID, MODAL_CLASS } from './globals.js'
 import { t } from './utils/l10n.js'
 
 import type { ComponentInstance } from 'vue'
@@ -27,7 +27,16 @@ export const confirmPassword = (): Promise<void> => {
 
   const mountPoint = document.createElement('div')
   mountPoint.setAttribute('id', DIALOG_ID)
-  document.body.prepend(mountPoint)
+
+  const modals = document.querySelectorAll(`.${MODAL_CLASS}`)
+  const isModalMounted = Boolean(modals.length)
+
+  if (isModalMounted) {
+    const previousModal = modals[modals.length - 1]
+    previousModal.prepend(mountPoint)
+  } else {
+    document.body.prepend(mountPoint)
+  }
 
   const DialogClass = Vue.extend(DialogComponent)
   // Mount point element is replaced by the component