fix(files): right click actions menu flicker

Signed-off-by: skjnldsv <skjnldsv@protonmail.com>

2 files changed, 39 insertions, 19 deletions

diff --git a/apps/files/src/components/FileEntry/FileEntryActions.vue b/apps/files/src/components/FileEntry/FileEntryActions.vue
index a183d1b0618..9916e420e1b 100644
--- a/apps/files/src/components/FileEntry/FileEntryActions.vue
+++ b/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"
@@ -230,7 +231,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
 		},
@@ -302,6 +303,20 @@ export default defineComponent({
 				this.openedMenu = true
 			}
 		},
+
+		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)
+		},
 	},
 })
 </script>
diff --git a/apps/files/src/components/FileEntryMixin.ts b/apps/files/src/components/FileEntryMixin.ts
index ece4f4ce225..2aef4631b46 100644
--- a/apps/files/src/components/FileEntryMixin.ts
+++ b/apps/files/src/components/FileEntryMixin.ts
@@ -178,7 +178,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
 			},
 		},
 
@@ -245,21 +254,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')
+				}
 			}
 		},
 	},
@@ -297,6 +301,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 {