Merge pull request #51872 from nextcloud/backport/51863/stable30

[stable30] fix(files): right click actions menu flicker

Author: skjnldsv

apps/files/src/components/FileEntry/FileEntryActions.vue

@@ -22,8 +22,9 @@
 			type="tertiary"
 			:force-menu="enabledInlineActions.length === 0 /* forceMenu only if no inline actions */"
 			:inline="enabledInlineActions.length"
-			:open.sync="openedMenu"
-			@close="openedSubmenu = null">
+			:open="openedMenu"
+			@close="onMenuClose"
+			@closed="onMenuClosed">
 			<!-- Default actions list-->
 			<NcActionButton v-for="action, index in enabledMenuActions"
 				:key="action.id"
@@ -242,7 +243,7 @@ export default defineComponent({
 	},
 
 	watch: {
-		// Close any submenu when the menu is closed
+		// Close any submenu when the menu state changes
 		openedMenu() {
 			this.openedSubmenu = null
 		},
@@ -335,6 +336,20 @@ export default defineComponent({
 			})
 		},
 
+		onMenuClose() {
+			// We reset the submenu state when the menu is closing
+			this.openedSubmenu = null
+		},
+
+		onMenuClosed() {
+			// TODO: remove timeout once https://github.com/nextcloud-libraries/nextcloud-vue/pull/6683 is merged
+			// and updated on server.
+			setTimeout(() => {
+				// We reset the actions menu state when the menu is finally closed
+				this.openedMenu = false
+			}, 100)
+		},
+
 		t,
 	},
 })

apps/files/src/components/FileEntryMixin.ts

@@ -176,7 +176,16 @@ export default defineComponent({
 				return this.actionsMenuStore.opened === this.uniqueId.toString()
 			},
 			set(opened) {
-				this.actionsMenuStore.opened = opened ? this.uniqueId.toString() : null
+				// If the menu is opened on another file entry, we ignore closed events
+				if (opened === false && this.actionsMenuStore.opened !== this.uniqueId.toString()) {
+					return
+				}
+
+				// If opened, we specify the current file id
+				// else we set it to null to close the menu
+				this.actionsMenuStore.opened = opened
+					? this.uniqueId.toString()
+					: null
 			},
 		},
 
@@ -243,21 +252,16 @@ export default defineComponent({
 		},
 
 		openedMenu() {
-			if (this.openedMenu === false) {
-				// TODO: This timeout can be removed once `close` event only triggers after the transition
-				// ref: https://github.com/nextcloud-libraries/nextcloud-vue/pull/6065
-				window.setTimeout(() => {
-					if (this.openedMenu) {
-						// was reopened while the animation run
-						return
-					}
-					// Reset any right menu position potentially set
-					const root = document.getElementById('app-content-vue')
-					if (root !== null) {
-						root.style.removeProperty('--mouse-pos-x')
-						root.style.removeProperty('--mouse-pos-y')
-					}
-				}, 300)
+			// Checking if the menu is really closed and not
+			// just a change in the open state to another file entry.
+			if (this.actionsMenuStore.opened === null) {
+				// Reset any right menu position potentially set
+				logger.debug('All actions menu closed, resetting right menu position...')
+				const root = this.$el?.closest('main.app-content') as HTMLElement
+				if (root !== null) {
+					root.style.removeProperty('--mouse-pos-x')
+					root.style.removeProperty('--mouse-pos-y')
+				}
 			}
 		},
 	},
@@ -298,6 +302,7 @@ export default defineComponent({
 				const contentRect = root.getBoundingClientRect()
 				// Using Math.min/max to prevent the menu from going out of the AppContent
 				// 200 = max width of the menu
+				logger.debug('Setting actions menu position...')
 				root.style.setProperty('--mouse-pos-x', Math.max(0, event.clientX - contentRect.left - 200) + 'px')
 				root.style.setProperty('--mouse-pos-y', Math.max(0, event.clientY - contentRect.top) + 'px')
 			} else {