Make sure there are always enough elements visible on the page

2 files changed, 18 insertions, 0 deletions

diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js
index 3bf5b2d9672..0847edd02bb 100644
--- a/apps/files/js/filelist.js
+++ b/apps/files/js/filelist.js
@@ -570,6 +570,7 @@ window.FileList = {
 			this.fileSummary.add(fileData, true);
 			this.updateEmptyContent();
 		}
+
 		return $tr;
 	},
 
@@ -823,6 +824,15 @@ window.FileList = {
 			FileList.updateEmptyContent();
 			this.fileSummary.remove({type: fileEl.attr('data-type'), size: fileEl.attr('data-size')}, true);
 		}
+
+		var lastIndex = this.$fileList.children().length;
+		// if there are less elements visible than one page
+		// but there are still pending elements in the array,
+		// then directly append the next page
+		if (lastIndex < this.files.length && lastIndex < this.pageSize) {
+			this._nextPage(true);
+		}
+
 		return fileEl;
 	},
 	/**
diff --git a/apps/files/tests/js/filelistSpec.js b/apps/files/tests/js/filelistSpec.js
index 7316cb75315..23261759d03 100644
--- a/apps/files/tests/js/filelistSpec.js
+++ b/apps/files/tests/js/filelistSpec.js
@@ -701,6 +701,14 @@ describe('FileList tests', function() {
 			FileList._nextPage(true);
 			expect($('#fileList tr').length).toEqual(81);
 		});
+		it('automatically renders next page when there are not enough elements visible', function() {
+			// delete the 15 first elements
+			for (var i = 0; i < 15; i++) {
+				FileList.remove(FileList.files[0].name);
+			}
+			// still makes sure that there are 20 elements visible, if any
+			expect($('#fileList tr').length).toEqual(25);
+		});
 	});
 	describe('file previews', function() {
 		var previewLoadStub;