[stable25] Fix: menubar throws errors on master focus trap too much recursion

cypress/e2e/workspace.spec.js

@@ -181,6 +181,22 @@ describe('Workspace', function() {
 			.should('not.contain', 'content')
 	})
 
+	it('emoji picker', () => {
+		cy.openWorkspace()
+			.type('# Let\'s smile together{enter}## ')
+
+		menuButton('emoji-picker')
+			.click()
+
+		cy.get('#emoji-mart-list button[aria-label="😀, grinning"]')
+			.first()
+			.click()
+
+		cy.getEditor()
+			.find('h2')
+			.contains('😀')
+	})
+
 	describe('callouts', () => {
 		const types = ['info', 'warn', 'error', 'success']
 

src/components/Menu/ActionAttachmentUpload.vue

@@ -24,6 +24,7 @@
 		:data-text-action-entry="actionEntry.key"
 		:title="actionEntry.label"
 		:aria-label="actionEntry.label"
+		:container="menuIDSelector"
 		role="menu"
 		aria-haspopup>
 		<template #icon>
@@ -59,6 +60,7 @@ import { NcActions, NcActionButton } from '@nextcloud/vue'
 import { Loading, Folder, Upload } from '../icons.js'
 import { useIsPublicMixin } from '../Editor.provider.js'
 import { BaseActionEntry } from './BaseActionEntry.js'
+import { useMenuIDMixin } from './MenuBar.provider.js'
 import {
 	useActionAttachmentPromptMixin,
 	useUploadingStateMixin,
@@ -80,6 +82,7 @@ export default {
 		useActionAttachmentPromptMixin,
 		useUploadingStateMixin,
 		useActionChooseLocalAttachmentMixin,
+		useMenuIDMixin,
 	],
 	computed: {
 		icon() {

src/components/Menu/ActionList.vue

@@ -25,6 +25,7 @@
 		class="entry-list-action entry-action"
 		role="menu"
 		v-bind="state"
+		:container="menuIDSelector"
 		:aria-label="actionEntry.label"
 		:title="actionEntry.label"
 		:data-text-action-entry="actionEntry.key"
@@ -48,12 +49,13 @@ import ActionSingle from './ActionSingle.vue'
 import { getIsActive } from './utils.js'
 import { useOutlineStateMixin } from '../Editor/Wrapper.provider.js'
 import useStore from '../../mixins/store.js'
+import { useMenuIDMixin } from './MenuBar.provider.js'
 
 export default {
 	name: 'ActionList',
 	components: { NcActions, ActionSingle },
 	extends: BaseActionEntry,
-	mixins: [useStore, useOutlineStateMixin],
+	mixins: [useStore, useOutlineStateMixin, useMenuIDMixin],
 	computed: {
 		currentChild() {
 			const {

src/components/Menu/EmojiPickerAction.vue

@@ -22,7 +22,8 @@
 <template>
 	<NcEmojiPicker class="entry-action entry-action__emoji"
 		:data-text-action-entry="actionEntry.key"
-		@selectData="addEmoji">
+		:container="menuIDSelector"
+		@select-data="addEmoji">
 		<NcButton v-tooltip="actionEntry.label"
 			class="entry-action__button"
 			role="menu"
@@ -39,6 +40,7 @@
 <script>
 import { BaseActionEntry } from './BaseActionEntry.js'
 import { NcEmojiPicker, NcButton } from '@nextcloud/vue'
+import { useMenuIDMixin } from './MenuBar.provider.js'
 
 export default {
 	name: 'EmojiPickerAction',
@@ -47,10 +49,8 @@ export default {
 		NcButton,
 	},
 	extends: BaseActionEntry,
+	mixins: [useMenuIDMixin],
 	methods: {
-		toggleChildMenu() {
-
-		},
 		addEmoji({ id, native }) {
 			this.actionEntry
 				.action(this.$editor.chain(), { id, native })

src/components/Menu/MenuBar.provider.js

@@ -0,0 +1,12 @@
+export const MENU_ID = Symbol('menu::id')
+
+export const useMenuIDMixin = {
+	inject: {
+		$menuID: { from: MENU_ID, default: null },
+	},
+	computed: {
+		menuIDSelector() {
+			return `#${this.$menuID}`
+		},
+	},
+}

src/components/Menu/MenuBar.vue

@@ -22,7 +22,8 @@
   -->
 
 <template>
-	<div class="text-menubar"
+	<div :id="randomID"
+		class="text-menubar"
 		data-text-el="menubar"
 		role="menubar"
 		:aria-label="t('text', 'Formatting menu bar')"
@@ -57,6 +58,7 @@ import debounce from 'debounce'
 import HelpModal from '../HelpModal.vue'
 import actionsFullEntries from './entries.js'
 import ActionEntry from './ActionEntry.js'
+import { MENU_ID } from './MenuBar.provider.js'
 import { DotsHorizontal } from '../icons.js'
 import {
 	useEditorMixin,
@@ -72,6 +74,17 @@ export default {
 		useIsRichEditorMixin,
 		useIsRichWorkspaceMixin,
 	],
+	provide() {
+		const val = {}
+
+		Object.defineProperties(val, {
+			[MENU_ID]: {
+				get: () => this.randomID,
+			},
+		})
+
+		return val
+	},
 	props: {
 		autohide: {
 			type: Boolean,
@@ -80,6 +93,7 @@ export default {
 	},
 	data() {
 		return {
+			randomID: `menu-bar-${(Math.ceil((Math.random() * 10000) + 500)).toString(16)}`,
 			displayHelp: false,
 			forceRecompute: 0,
 			isReady: false,