fixup! fix(files): Correctly scroll selected file into view

Author: susnux

apps/files/src/components/VirtualList.vue

@@ -155,7 +155,7 @@ export default defineComponent({
 		/**
 		 * The number of rows currently (fully!) visible
 		 */
-		visualRows(): number {
+		visibleRows(): number {
 			return Math.floor((this.tableHeight - this.headerHeight) / this.itemHeight)
 		},
 
@@ -164,7 +164,7 @@ export default defineComponent({
 		 * This includes only visible + buffer rows.
 		 */
 		rowCount(): number {
-			return this.visualRows + (this.bufferItems / this.columnCount) * 2 + 1
+			return this.visibleRows + (this.bufferItems / this.columnCount) * 2 + 1
 		},
 
 		/**
@@ -238,13 +238,15 @@ export default defineComponent({
 		},
 
 		tbodyStyle() {
+			// The number of (virtual) rows above the currently rendered ones.
 			// start index is aligned so this should always be an integer
-			const rowsBefore = Math.round(this.startIndex / this.columnCount)
-			const rowsAfter = Math.min(0, this.totalRowCount - rowsBefore - this.rowCount)
+			const rowsAbove = Math.round(this.startIndex / this.columnCount)
+			// The number of (virtual) rows below the currently rendered ones.
+			const rowsBelow = Math.min(0, this.totalRowCount - rowsAbove - this.rowCount)
 
 			return {
-				paddingTop: `${rowsBefore * this.itemHeight}px`,
-				paddingBottom: `${rowsAfter * this.itemHeight}px`,
+				paddingTop: `${rowsAbove * this.itemHeight}px`,
+				paddingBottom: `${rowsBelow * this.itemHeight}px`,
 				minHeight: `${this.totalRowCount * this.itemHeight}px`,
 			}
 		},
@@ -286,8 +288,9 @@ export default defineComponent({
 		// Make sure height values are initialized
 		this.updateHeightVariables()
 
-		// If we need to scroll to an index we do so in the next tick
-		// this is needed to apply updates from the initialization of the height variables
+		// If we need to scroll to an index we do so in the next tick.
+		// This is needed to apply updates from the initialization of the height variables
+		// which will update the tbody styles until next tick.
 		if (this.scrollToIndex) {
 			this.$nextTick(() => this.scrollTo(this.scrollToIndex))
 		}
@@ -311,17 +314,17 @@ export default defineComponent({
 			}
 
 			// Check if the content is smaller than the viewport, meaning no scrollbar
-			if (this.totalRowCount < this.visualRows) {
+			if (this.totalRowCount < this.visibleRows) {
 				logger.debug('VirtualList: Skip scrolling, nothing to scroll', {
 					index,
 					totalRows: this.totalRowCount,
-					visualRows: this.visualRows,
+					visibleRows: this.visibleRows,
 				})
 				return
 			}
 
 			// We can not scroll further as the last page of rows (+ footer)
-			const clampedIndex = (this.totalRowCount - this.visualRows + 1) * this.columnCount
+			const clampedIndex = (this.totalRowCount - this.visibleRows + 1) * this.columnCount
 			let scrollTop = this.indexToScrollPos(Math.min(index, clampedIndex))
 
 			// If this is not the first row we can add a half row from above.
@@ -330,7 +333,7 @@ export default defineComponent({
 			if (index > 0 && index <= clampedIndex) {
 				scrollTop -= (this.itemHeight / 2)
 			}
-			logger.debug('VirtualList: scrolling to index ' + index, { clampedIndex, scrollTop, columnCount: this.columnCount, total: this.totalRowCount, visualRows: this.visualRows, beforeHeight: this.beforeHeight })
+			logger.debug('VirtualList: scrolling to index ' + index, { clampedIndex, scrollTop, columnCount: this.columnCount, total: this.totalRowCount, visibleRows: this.visibleRows, beforeHeight: this.beforeHeight })
 			this.$el.scrollTop = scrollTop
 		},