fix(files): Ensure that focussed file is always scrolled right

Ensure the correct file is scrolled if the content changes,
this also sets a minimal height to the virtual scrolling area
so that the `scrollTop` can be set.

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

1 files changed, 24 insertions, 0 deletions

diff --git a/apps/files/src/components/VirtualList.vue b/apps/files/src/components/VirtualList.vue
index 173fe284d27..b00c24a12a2 100644
--- a/apps/files/src/components/VirtualList.vue
+++ b/apps/files/src/components/VirtualList.vue
@@ -142,9 +142,17 @@ export default Vue.extend({
 			return Math.floor(this.filesListWidth / this.itemWidth)
 		},
 
+		/**
+		 * Index of the first item to be rendered
+		 */
 		startIndex() {
 			return Math.max(0, this.index - this.bufferItems)
 		},
+
+		/**
+		 * Number of items to be rendered at the same time
+		 * For list view this is the same as `rowCount`, for grid view this is `rowCount` * `columnCount`
+		 */
 		shownItems() {
 			// If in grid mode, we need to multiply the number of rows by the number of columns
 			if (this.gridMode) {
@@ -153,6 +161,7 @@ export default Vue.extend({
 
 			return this.rowCount
 		},
+
 		renderedItems(): RecycledPoolItem[] {
 			if (!this.isReady) {
 				return []
@@ -181,6 +190,13 @@ export default Vue.extend({
 			})
 		},
 
+		/**
+		 * The total number of rows that are available
+		 */
+		totalRowCount() {
+			return Math.floor(this.dataSources.length / this.columnCount)
+		},
+
 		tbodyStyle() {
 			const isOverScrolled = this.startIndex + this.rowCount > this.dataSources.length
 			const lastIndex = this.dataSources.length - this.startIndex - this.shownItems
@@ -188,6 +204,7 @@ export default Vue.extend({
 			return {
 				paddingTop: `${Math.floor(this.startIndex / this.columnCount) * this.itemHeight}px`,
 				paddingBottom: isOverScrolled ? 0 : `${hiddenAfterItems * this.itemHeight}px`,
+				minHeight: `${this.totalRowCount * this.itemHeight + this.beforeHeight}px`,
 			}
 		},
 	},
@@ -195,6 +212,13 @@ export default Vue.extend({
 		scrollToIndex(index) {
 			this.scrollTo(index)
 		},
+
+		totalRowCount() {
+			if (this.scrollToIndex) {
+				this.$nextTick(() => this.scrollTo(this.scrollToIndex))
+			}
+		},
+
 		columnCount(columnCount, oldColumnCount) {
 			if (oldColumnCount === 0) {
 				// We're initializing, the scroll position