Merge pull request #3478 from nextcloud/fix/focus-trap

package.json

@@ -46,7 +46,6 @@
 		"@nextcloud/capabilities": "^1.0.4",
 		"@nextcloud/dialogs": "^3.1.4",
 		"@nextcloud/event-bus": "^3.0.0",
-		"@nextcloud/focus-trap": "^0.1.0-beta",
 		"@nextcloud/initial-state": "^2.0.0",
 		"@nextcloud/l10n": "^1.6.0",
 		"@nextcloud/logger": "^2.2.1",
@@ -55,6 +54,7 @@
 		"emoji-mart-vue-fast": "^11.1.1",
 		"escape-html": "^1.0.3",
 		"floating-vue": "^1.0.0-beta.18",
+		"focus-trap": "^7.1.0",
 		"hammerjs": "^2.0.8",
 		"linkify-string": "^4.0.0",
 		"md5": "^2.3.0",

src/components/NcModal/NcModal.vue

@@ -21,7 +21,6 @@
   -->
 
 <docs>
-
 ```vue
 <template>
 	<div>
@@ -38,13 +37,6 @@
 		</NcModal>
 	</div>
 </template>
-<style scoped>
-.modal__content {
-	margin: 50px;
-	text-align: center;
-}
-
-</style>
 <script>
 export default {
 	data() {
@@ -62,6 +54,12 @@ export default {
 	}
 }
 </script>
+<style scoped>
+.modal__content {
+	margin: 50px;
+	text-align: center;
+}
+</style>
 ```
 
 ### Modal with more properties
@@ -125,9 +123,7 @@ export default {
 .input-field {
 	margin: 12px 0px;
 }
-
 </style>
-
 ```
 
 ### Usage of popover in modal
@@ -145,12 +141,6 @@ export default {
 		</NcModal>
 	</div>
 </template>
-<style scoped>
-	.modal__content {
-		margin: 50px;
-		text-align: center;
-	}
-</style>
 <script>
 export default {
 	data() {
@@ -172,6 +162,12 @@ export default {
 	},
 }
 </script>
+<style scoped>
+.modal__content {
+	margin: 50px;
+	text-align: center;
+}
+</style>
 ```
 </docs>
 
@@ -310,22 +306,24 @@ export default {
 </template>
 
 <script>
-import NcActions from '../NcActions/index.js'
-import Tooltip from '../../directives/Tooltip/index.js'
-import l10n from '../../mixins/l10n.js'
-import Timer from '../../utils/Timer.js'
+import { getTrapStack } from '../../utils/focusTrap.js'
 import { t } from '../../l10n.js'
-import NcButton from '../../components/NcButton/index.js'
 import GenRandomId from '../../utils/GenRandomId.js'
+import l10n from '../../mixins/l10n.js'
+import NcActions from '../NcActions/index.js'
+import NcButton from '../../components/NcButton/index.js'
+import Timer from '../../utils/Timer.js'
+import Tooltip from '../../directives/Tooltip/index.js'
 
 import ChevronLeft from 'vue-material-design-icons/ChevronLeft.vue'
 import ChevronRight from 'vue-material-design-icons/ChevronRight.vue'
 import Close from 'vue-material-design-icons/Close.vue'
 import Pause from 'vue-material-design-icons/Pause.vue'
 import Play from 'vue-material-design-icons/Play.vue'
 
+import { createFocusTrap } from 'focus-trap'
 import Hammer from 'hammerjs'
-import { createFocusTrap } from '@nextcloud/focus-trap'
+
 export default {
 	name: 'NcModal',
 
@@ -689,8 +687,10 @@ export default {
 			const contentContainer = this.$refs.mask
 			// wait until all children are mounted and available in the DOM before focusTrap can be added
 			this.$nextTick(() => {
+				// Init focus trap
 				this.focusTrap = createFocusTrap(contentContainer, {
 					allowOutsideClick: true,
+					trapStack: getTrapStack(),
 				})
 				this.focusTrap.activate()
 			})

src/components/NcPopover/NcPopover.vue

@@ -102,7 +102,8 @@ The prop `:focus-trap="false"` help to prevent it when the default behavior is n
 
 <script>
 import { Dropdown } from 'floating-vue'
-import { createFocusTrap } from '@nextcloud/focus-trap'
+import { createFocusTrap } from 'focus-trap'
+import { getTrapStack } from '../../utils/focusTrap.js'
 
 export default {
 	name: 'NcPopover',
@@ -155,11 +156,13 @@ export default {
 				return
 			}
 
+			// Init focus trap
 			this.$focusTrap = createFocusTrap(el, {
 				// Prevents to lose focus using esc key
 				// Focus will be release when popover be hide
 				escapeDeactivates: false,
 				allowOutsideClick: true,
+				trapStack: getTrapStack(),
 			})
 			this.$focusTrap.activate()
 		},

src/utils/focusTrap.js

@@ -0,0 +1,35 @@
+/**
+ * @copyright Copyright (c) 2022 John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @author John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+// eslint-disable-next-line import/named
+import { FocusTrap } from 'focus-trap'
+
+/**
+ * Return the default global focus trap stack
+ *
+ * @return {FocusTrap[]}
+ */
+export const getTrapStack = function() {
+	// Create global stack if undefined
+	Object.assign(window, { _nc_focus_trap: window._nc_focus_trap || [] })
+
+	return window._nc_focus_trap
+}