diff --git a/src/components/NcActions/NcActions.vue b/src/components/NcActions/NcActions.vue index fe36aa8694..c5ebdbe146 100644 --- a/src/components/NcActions/NcActions.vue +++ b/src/components/NcActions/NcActions.vue @@ -994,6 +994,7 @@ export default { isSemanticMenu: false, isSemanticNavigation: false, isSemanticPopoverLike: false, + externalFocusTrapStack: [], } }, @@ -1016,9 +1017,38 @@ export default { this.opened = state }, + + opened() { + this.intersectIntoCurrentFocusTrapStack() + }, }, methods: { + /** + * If the component has its own focus trap, then it is managed by global trap stack by focus-trap. + * + * But if the component has no focus trap and 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. + * We need pause the focus-trap for opening popover and then unpause it after closing. + */ + intersectIntoCurrentFocusTrapStack() { + if (this.focusTrap) { + return + } + + if (this.internalShown) { + 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?