Merge pull request #44139 from nextcloud/fix/right-click-files-list

fix(files): Right click menu offset and list scrolled glitch

Author: Pytal

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

@@ -352,12 +352,13 @@ export default Vue.extend({
 <style lang="scss">
 // Allow right click to define the position of the menu
 // only if defined
-[style*="mouse-pos-x"] .v-popper__popper {
+main.app-content[style*="mouse-pos-x"] .v-popper__popper {
 	transform: translate3d(var(--mouse-pos-x), var(--mouse-pos-y), 0px) !important;
 
 	// If the menu is too close to the bottom, we move it up
 	&[data-popper-placement="top"] {
-		transform: translate3d(var(--mouse-pos-x), calc(var(--mouse-pos-y) - 50vh), 0px) !important;
+		// 34px added to align with the top of the cursor
+		transform: translate3d(var(--mouse-pos-x), calc(var(--mouse-pos-y) - 50vh + 34px), 0px) !important;
 	}
 	// Hide arrow if floating
 	.v-popper__arrow-container {

apps/files/src/components/FileEntryMixin.ts

@@ -162,7 +162,7 @@ export default defineComponent({
 				if (opened) {
 					// Reset any right click position override on close
 					// Wait for css animation to be done
-					const root = this.$root.$el as HTMLElement
+					const root = this.$el?.closest('main.app-content') as HTMLElement
 					root.style.removeProperty('--mouse-pos-x')
 					root.style.removeProperty('--mouse-pos-y')
 				}
@@ -210,12 +210,13 @@ export default defineComponent({
 			// The grid mode is compact enough to not care about
 			// the actions menu mouse position
 			if (!this.gridMode) {
-				const root = this.$root.$el as HTMLElement
+				// Actions menu is contained within the app content
+				const root = this.$el?.closest('main.app-content') as HTMLElement
 				const contentRect = root.getBoundingClientRect()
 				// Using Math.min/max to prevent the menu from going out of the AppContent
 				// 200 = max width of the menu
-				root.style.setProperty('--mouse-pos-x', Math.max(contentRect.left, Math.min(event.clientX, event.clientX - 200)) + 'px')
-				root.style.setProperty('--mouse-pos-y', Math.max(contentRect.top, event.clientY - contentRect.top) + 'px')
+				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')
 			}
 
 			// If the clicked row is in the selection, open global menu

apps/files/src/components/FilesListVirtual.vue

@@ -326,7 +326,6 @@ export default defineComponent({
 	--clickable-area: 44px;
 	--icon-preview-size: 32px;
 
-	position: relative;
 	overflow: auto;
 	height: 100%;
 	will-change: scroll-position;

cypress/support/e2e.ts

@@ -25,3 +25,4 @@ import './commands.ts'
 // Fix ResizeObserver loop limit exceeded happening in Cypress only
 // @see https://github.com/cypress-io/cypress/issues/20341
 Cypress.on('uncaught:exception', err => !err.message.includes('ResizeObserver loop limit exceeded'))
+Cypress.on('uncaught:exception', err => !err.message.includes('ResizeObserver loop completed with undelivered notifications'))