diff --git a/src/components/NcActions/NcActions.vue b/src/components/NcActions/NcActions.vue
index 42eb23004a..9c4b282143 100644
--- a/src/components/NcActions/NcActions.vue
+++ b/src/components/NcActions/NcActions.vue
@@ -920,7 +920,7 @@ export default {
 <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 @@ export default {
 			 * @type {'menu'|'navigation'|'dialog'|'tooltip'|'unknown'}
 			 */
 			actionsMenuSemanticType: 'unknown',
-			externalFocusTrapStack: [],
 		}
 	},
 
@@ -1238,8 +1237,6 @@ export default {
 		},
 
 		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 @@ export default {
 		},
 	},
 
+	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 @@ export default {
 			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?
diff --git a/src/components/NcAppNavigation/NcAppNavigation.vue b/src/components/NcAppNavigation/NcAppNavigation.vue
index ed691ae1a4..7ea8354783 100644
--- a/src/components/NcAppNavigation/NcAppNavigation.vue
+++ b/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'
 
diff --git a/src/components/NcAppSidebar/NcAppSidebar.vue b/src/components/NcAppSidebar/NcAppSidebar.vue
index 3b0922248c..3b58bc2773 100644
--- a/src/components/NcAppSidebar/NcAppSidebar.vue
+++ b/src/components/NcAppSidebar/NcAppSidebar.vue
@@ -713,7 +713,7 @@ import Focus from '../../directives/Focus/index.js'
 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'
 
diff --git a/src/components/NcEmojiPicker/NcEmojiPicker.vue b/src/components/NcEmojiPicker/NcEmojiPicker.vue
index 2b50ff679a..c1b33d5dc7 100644
--- a/src/components/NcEmojiPicker/NcEmojiPicker.vue
+++ b/src/components/NcEmojiPicker/NcEmojiPicker.vue
@@ -185,6 +185,7 @@ This component allows the user to pick an emoji.
 
 <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 @@ export default {
 		},
 	},
 
+	created() {
+		// Component has its own custom focus management
+		// The global focus trap stack should be paused
+		useTrapStackControl(() => this.open)
+	},
+
 	methods: {
 		t,
 
diff --git a/src/components/NcHeaderMenu/NcHeaderMenu.vue b/src/components/NcHeaderMenu/NcHeaderMenu.vue
index e956c5ba9b..c55fd91da6 100644
--- a/src/components/NcHeaderMenu/NcHeaderMenu.vue
+++ b/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'
diff --git a/src/components/NcModal/NcModal.vue b/src/components/NcModal/NcModal.vue
index e0f5e0e4ef..75b0cd48fb 100644
--- a/src/components/NcModal/NcModal.vue
+++ b/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'
diff --git a/src/components/NcPopover/NcPopover.vue b/src/components/NcPopover/NcPopover.vue
index aaa0b46017..14ec67b8d3 100644
--- a/src/components/NcPopover/NcPopover.vue
+++ b/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'
 
 /**
diff --git a/src/composables/useTrapStackControl.ts b/src/composables/useTrapStackControl.ts
new file mode 100644
index 0000000000..667889e661
--- /dev/null
+++ b/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()
+	})
+}
diff --git a/src/utils/focusTrap.js b/src/utils/focusTrap.js
deleted file mode 100644
index cb79875796..0000000000
--- a/src/utils/focusTrap.js
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-
-/**
- * Return the default global focus trap stack
- *
- * @return {import('focus-trap').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
-}
diff --git a/src/utils/focusTrap.ts b/src/utils/focusTrap.ts
new file mode 100644
index 0000000000..c890ad0f5c
--- /dev/null
+++ b/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 = []
+		},
+	}
+}