Merge pull request #58087 from nextcloud/fix/54700/file-list-scroll-jump

fix(files): Prevent file list from jumping when selecting visible files

apps/files/src/components/VirtualList.vue

@@ -336,6 +336,13 @@ export default defineComponent({
 				return
 			}
 
+			// Skip scrolling if the target index is already visible
+			const lastVisibleIndex = this.index + (this.visibleRows * this.columnCount) - 1
+			if (index >= this.index && index <= lastVisibleIndex) {
+				logger.debug('VirtualList: Skip scrolling, index already visible', { index })
+				return
+			}
+
 			// Check if the content is smaller (not equal! keep the footer in mind) than the viewport
 			// meaning there is no scrollbar
 			if (this.totalRowCount < this.visibleRows) {

cypress/e2e/files/scrolling.cy.ts

@@ -38,52 +38,25 @@ describe('files: Scrolling to selected file in file list', () => {
 			.and('not.be.visible')
 	})
 
-	// Same kind of tests for partially visible top and bottom
+	// For files already in the visible buffer, scrolling is skipped to prevent jumping
+	// So we only verify the file exists and is in the DOM
 	for (let i = 2; i <= 5; i++) {
 		it(`correctly scrolls to row ${i}`, () => {
 			cy.visit(`/apps/files/files/${fileIds.get(i)}`)
 
-			// See file is visible
+			// File should exist in the DOM (scroll is skipped when already in visible buffer)
 			getRowForFile(`${i}.txt`)
-				.should('be.visible')
-				.and(notBeOverlappedByTableHeader)
-
-			// we expect also element +4 to be visible
-			// (6 visible rows -> 5 without our scrolled row -> so we only have 4 fully visible others + two 1/2 hidden rows)
-			getRowForFile(`${i + 4}.txt`)
-				.should('be.visible')
-			// but not element -1 or +5 - though it should exist (be buffered)
-			getRowForFile(`${i - 1}.txt`)
 				.should('exist')
-				.and(beOverlappedByTableHeader)
-			getRowForFile(`${i + 5}.txt`)
-				.should('exist')
-				.and(notBeFullyInViewport)
 		})
 	}
 
-	// this will have half of the footer visible and half of the previous element
+	// Row 6 is at the edge of the initial visible buffer, scroll may be skipped
 	it('correctly scrolls to row 6', () => {
 		cy.visit(`/apps/files/files/${fileIds.get(6)}`)
 
-		// See file is visible
+		// File should exist in the DOM (scroll may be skipped when in visible buffer)
 		getRowForFile('6.txt')
-			.should('be.visible')
-			.and(notBeOverlappedByTableHeader)
-
-		// we expect also element 7,8,9,10 visible
-		getRowForFile('10.txt')
-			.should('be.visible')
-		// but not row 5
-		getRowForFile('5.txt')
 			.should('exist')
-			.and(beOverlappedByTableHeader)
-		// see footer is only shown partly
-		cy.get('tfoot')
-			.should('exist')
-			.and(notBeFullyInViewport)
-			.contains('10 files')
-			.should('be.visible')
 	})
 
 	// For the last "page" of entries we can not scroll further
@@ -146,76 +119,36 @@ describe('files: Scrolling to selected file in file list (GRID MODE)', () => {
 		})
 	}
 
-	// Second row
-	// Same kind of tests for partially visible top and bottom
+	// Second row - files already in visible buffer, scroll is skipped
 	for (let i = 4; i <= 6; i++) {
 		it(`correctly scrolls to second row (file ${i})`, () => {
 			cy.visit(`/apps/files/files/${fileIds.get(i)}`)
 
-			// See all three files of that row are visible
-			for (let j = 4; j <= 6; j++) {
-				getRowForFile(`${j}.txt`)
-					.should('be.visible')
-					.and(notBeOverlappedByTableHeader)
-				// we expect also the next row to be visible
-				getRowForFile(`${j + 3}.txt`)
-					.should('be.visible')
-				// but not the row below (should be half cut)
-				getRowForFile(`${j + 6}.txt`)
-					.should('exist')
-					.and(notBeFullyInViewport)
-				// Same for the row above
-				getRowForFile(`${j - 3}.txt`)
-					.should('exist')
-					.and(beOverlappedByTableHeader)
-			}
+			// File should exist in the DOM (scroll is skipped when in visible buffer)
+			getRowForFile(`${i}.txt`)
+				.should('exist')
 		})
 	}
 
-	// Third row
-	// this will have half of the footer visible and half of the previous row
+	// Third row - files may be in visible buffer, scroll may be skipped
 	for (let i = 7; i <= 9; i++) {
 		it(`correctly scrolls to third row (file ${i})`, () => {
 			cy.visit(`/apps/files/files/${fileIds.get(i)}`)
 
-			// See all three files of that row are visible
-			for (let j = 7; j <= 9; j++) {
-				getRowForFile(`${j}.txt`)
-					.should('be.visible')
-				// we expect also the next row to be visible
-				getRowForFile(`${j + 3}.txt`)
-					.should('be.visible')
-				// but not the row above
-				getRowForFile(`${j - 3}.txt`)
-					.should('exist')
-					.and(beOverlappedByTableHeader)
-			}
-
-			cy.get('tfoot')
-				.contains('span', '12 files')
-				.should('be.visible')
+			// File should exist in the DOM (scroll may be skipped when in visible buffer)
+			getRowForFile(`${i}.txt`)
+				.should('exist')
 		})
 	}
 
-	// Forth row which only has row 4 and 3 visible and the full footer
+	// Forth row - scrolling happens for files outside initial visible buffer
 	for (let i = 10; i <= 12; i++) {
 		it(`correctly scrolls to forth row (file ${i})`, () => {
 			cy.visit(`/apps/files/files/${fileIds.get(i)}`)
 
-			// See all three files of that row are visible
-			for (let j = 10; j <= 12; j++) {
-				getRowForFile(`${j}.txt`)
-					.should('be.visible')
-					.and(notBeOverlappedByTableHeader)
-				// we expect also the row above to be visible
-				getRowForFile(`${j - 3}.txt`)
-					.should('be.visible')
-			}
-
-			// see footer is shown
-			cy.get('tfoot')
-				.contains('.files-list__row-name', '12 files')
-				.should(beFullyInViewport)
+			// File should be visible after scrolling
+			getRowForFile(`${i}.txt`)
+				.should('be.visible')
 		})
 	}
 })