[next] fix(NcEmojiPicker): not focusable when used in another focus trap

src/components/NcActions/NcActions.vue

@@ -920,7 +920,7 @@
 <script>
 import { useElementBounding, useWindowSize } from '@vueuse/core'
 import { Fragment, computed, h, mergeProps, ref, toRef, warn } from 'vue'
-import { getTrapStack } from '../../utils/focusTrap.js'
+import { useTrapStackControl } from '../../composables/useTrapStackControl.ts'
 import { t } from '../../l10n.js'
 
 import NcButton from '../NcButton/index.ts'
@@ -1154,7 +1154,6 @@
 			 * @type {'menu'|'navigation'|'dialog'|'tooltip'|'unknown'}
 			 */
 			actionsMenuSemanticType: 'unknown',
-			externalFocusTrapStack: [],
 		}
 	},
 
@@ -1238,8 +1237,6 @@
 		},
 
 		opened() {
-			this.intersectIntoCurrentFocusTrapStack()
-
 			// Ensure that pressing escape will close the menu even if the menu is not hovered
 			// and not currently active, e.g. because user opened the context menu
 			if (this.opened) {
@@ -1250,6 +1247,14 @@
 		},
 	},
 
+	created() {
+		// When component has its own custom focus management
+		// The global focus trap stack should be paused
+		useTrapStackControl(() => this.opened, {
+			disabled: () => this.config.withFocusTrap,
+		})
+	},
+
 	methods: {
 		/**
 		 * Get the name of the action component
@@ -1261,33 +1266,6 @@
 			return action?.type?.name
 		},
 
-		/**
-		 * When the component has its own focus trap, then it is managed by global trap stack by focus-trap.
-		 *
-		 * However if the component has no focus trap and is used inside another focus trap - there is an issue.
-		 * By default popover content is rendered in body or other container, which is likely outside the current focus trap containers.
-		 * It results in broken behavior from focus-trap.
-		 *
-		 * We need to pause all the focus traps for opening popover and then unpause them back after closing.
-		 */
-		intersectIntoCurrentFocusTrapStack() {
-			if (this.config.withFocusTrap) {
-				return
-			}
-
-			if (this.opened) {
-				this.externalFocusTrapStack = [...getTrapStack()]
-				for (const trap of this.externalFocusTrapStack) {
-					trap.pause()
-				}
-			} else {
-				for (const trap of this.externalFocusTrapStack) {
-					trap.unpause()
-				}
-				this.externalFocusTrapStack = []
-			}
-		},
-
 		/**
 		 * Do we have exactly one Action and
 		 * is it allowed as a standalone element?
@@ -1418,7 +1396,7 @@
 		},
 
 		/**
 		 * @return {NodeListOf<HTMLElement>}
 		 */
 		getFocusableMenuItemElements() {
 			return this.$refs.menu.querySelectorAll(focusableSelector)

src/components/NcAppNavigation/NcAppNavigation.vue

@@ -169,7 +169,7 @@ emit('toggle-navigation', {
 
 <script>
 import { useIsMobile } from '../../composables/useIsMobile/index.js'
-import { getTrapStack } from '../../utils/focusTrap.js'
+import { getTrapStack } from '../../utils/focusTrap.ts'
 import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { createFocusTrap } from 'focus-trap'
 

src/components/NcAppSidebar/NcAppSidebar.vue

@@ -713,7 +713,7 @@
 import Linkify from '../../directives/Linkify/index.js'
 import { useIsSmallMobile } from '../../composables/useIsMobile/index.js'
 import GenRandomId from '../../utils/GenRandomId.js'
-import { getTrapStack } from '../../utils/focusTrap.js'
+import { getTrapStack } from '../../utils/focusTrap.ts'
 import { t } from '../../l10n.js'
 import isSlotPopulated from '../../utils/isSlotPopulated.ts'
 
@@ -1100,7 +1100,7 @@
 			 * @type {Event}
 			 */
 			// eslint-disable-next-line vue/require-explicit-emits
 			this.$emit('figure-click', e)
 		},
 
 		/**
@@ -1191,7 +1191,7 @@
 			 *
 			 * @type {Event}
 			 */
 			this.$emit('submit-name', event)
 		},
 		onDismissEditing() {
 			// Disable editing
@@ -1201,7 +1201,7 @@
 			 *
 			 * @type {Event}
 			 */
 			this.$emit('dismiss-editing')
 		},
 		onUpdateActive(activeTab) {
 			/**

src/components/NcEmojiPicker/NcEmojiPicker.vue

@@ -185,6 +185,7 @@
 
 <script>
 import { getCurrentSkinTone, setCurrentSkinTone } from '../../functions/emoji/emoji.ts'
+import { useTrapStackControl } from '../../composables/useTrapStackControl.ts'
 import { Color } from '../../utils/GenColors.js'
 
 import IconCircle from 'vue-material-design-icons/Circle.vue'
@@ -345,6 +346,12 @@
 		},
 	},
 
+	created() {
+		// Component has its own custom focus management
+		// The global focus trap stack should be paused
+		useTrapStackControl(() => this.open)
+	},
+
 	methods: {
 		t,
 
@@ -378,7 +385,7 @@
 			/**
 			 * Emits a object with more data about the picked emoji
 			 */
 			this.$emit('select-data', emojiObject)
 
 			if (this.closeOnSelect) {
 				this.open = false

src/components/NcHeaderMenu/NcHeaderMenu.vue

@@ -106,7 +106,7 @@ import type { FocusTrap } from 'focus-trap'
 import { onClickOutside } from '@vueuse/core'
 import { createFocusTrap } from 'focus-trap'
 import { computed, nextTick, ref, useTemplateRef, watch, type Slot } from 'vue'
-import { getTrapStack } from '../../utils/focusTrap.js'
+import { getTrapStack } from '../../utils/focusTrap.ts'
 import { useHotKey } from '../../composables/index.js'
 
 import GenRandomId from '../../utils/GenRandomId.js'

src/components/NcModal/NcModal.vue

@@ -328,7 +328,7 @@ import { useSwipe } from '@vueuse/core'
 import { createFocusTrap } from 'focus-trap'
 import { warn as VueWarn } from 'vue'
 
-import { getTrapStack } from '../../utils/focusTrap.js'
+import { getTrapStack } from '../../utils/focusTrap.ts'
 import { t } from '../../l10n.js'
 import GenRandomId from '../../utils/GenRandomId.js'
 import NcActions from '../NcActions/index.js'

src/components/NcPopover/NcPopover.vue

@@ -165,7 +165,7 @@ See: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/
 import { warn } from 'vue'
 import { Dropdown } from 'floating-vue'
 import { createFocusTrap } from 'focus-trap'
-import { getTrapStack } from '../../utils/focusTrap.js'
+import { getTrapStack } from '../../utils/focusTrap.ts'
 import NcPopoverTriggerProvider from './NcPopoverTriggerProvider.vue'
 
 /**

src/composables/useTrapStackControl.ts

@@ -0,0 +1,37 @@
+/**
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import type { Ref } from 'vue'
+import type { MaybeRefOrGetter } from '@vueuse/core'
+import { onUnmounted, watch } from 'vue'
+import { toValue } from '@vueuse/core'
+import { createTrapStackController } from '../utils/focusTrap.ts'
+
+/**
+ * Control global focus trap stack when focus trap is managed manually
+ *
+ * @param shouldPause - Whether focus trap should be paused
+ * @param options - Additional options
+ * @param options.disabled - Whether the controller should be disabled
+ */
+export function useTrapStackControl(shouldPause: Ref<boolean> | (() => boolean), options: { disabled?: MaybeRefOrGetter<boolean> } = {}) {
+	const trapStackController = createTrapStackController()
+
+	watch(shouldPause, () => {
+		if (toValue(options.disabled)) {
+			return
+		}
+
+		if (toValue(shouldPause)) {
+			trapStackController.pause()
+		} else {
+			trapStackController.unpause()
+		}
+	})
+
+	onUnmounted(() => {
+		trapStackController.unpause()
+	})
+}

src/utils/focusTrap.ts

@@ -0,0 +1,56 @@
+/**
+ * SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import type { FocusTrap } from 'focus-trap'
+
+declare global {
+	interface Window {
+		_nc_focus_trap: FocusTrap[]
+	}
+}
+
+/**
+ * Get the default global focus trap stack
+ */
+export function getTrapStack() {
+	// Create global stack if undefined
+	window._nc_focus_trap ??= []
+
+	return window._nc_focus_trap
+}
+
+/**
+ * Create controller to pause/unpause the global focus trap stack.
+ *
+ * When some component manually implements its own focus-trap without using global focus-trap stack,
+ * it also needs to pause the global stack to avoid conflict.
+ */
+export function createTrapStackController() {
+	/**
+	 * Stack of focus traps that were paused to unpause the exact stack later
+	 */
+	let pausedStack: FocusTrap[] = []
+
+	return {
+		/**
+		 * Pause the current focus-trap stack
+		 */
+		pause() {
+			pausedStack = [...getTrapStack()]
+			for (const trap of pausedStack) {
+				trap.pause()
+			}
+		},
+		/**
+		 * Unpause the paused focus trap stack
+		 */
+		unpause() {
+			for (const trap of pausedStack) {
+				trap.unpause()
+			}
+			pausedStack = []
+		},
+	}
+}