Fix infinite scroll when the scrollbar is not visible

src/js/select2/dropdown/infiniteScroll.js

@@ -18,6 +18,7 @@ define([
 
     if (this.showLoadingMore(data)) {
       this.$results.append(this.$loadingMore);
+      this.loadMoreIfNeeded();
     }
   };
 
@@ -36,25 +37,27 @@ define([
       self.loading = true;
     });
 
-    this.$results.on('scroll', function () {
-      var isLoadMoreVisible = $.contains(
-        document.documentElement,
-        self.$loadingMore[0]
-      );
+    this.$results.on('scroll', this.loadMoreIfNeeded.bind(this));
+  };
+
+  InfiniteScroll.prototype.loadMoreIfNeeded = function () {
+    var isLoadMoreVisible = $.contains(
+      document.documentElement,
+      this.$loadingMore[0]
+    );
 
-      if (self.loading || !isLoadMoreVisible) {
-        return;
-      }
+    if (this.loading || !isLoadMoreVisible) {
+      return;
+    }
 
-      var currentOffset = self.$results.offset().top +
-        self.$results.outerHeight(false);
-      var loadingMoreOffset = self.$loadingMore.offset().top +
-        self.$loadingMore.outerHeight(false);
+    var currentOffset = this.$results.offset().top +
+      this.$results.outerHeight(false);
+    var loadingMoreOffset = this.$loadingMore.offset().top +
+      this.$loadingMore.outerHeight(false);
 
-      if (currentOffset + 50 >= loadingMoreOffset) {
-        self.loadMore();
-      }
-    });
+    if (currentOffset + 50 >= loadingMoreOffset) {
+      this.loadMore();
+    }
   };
 
   InfiniteScroll.prototype.loadMore = function () {

tests/results/infiniteScroll-tests.js

@@ -0,0 +1,126 @@
+module('Results - Infinite scrolling');
+
+test('loadingMore is triggered even without a scrollbar', function (assert) {
+  assert.expect(1);
+
+  var $ = require('jquery');
+
+  var $select = $('<select></select>');
+
+  var $container = $('<span></span>');
+  var container = new MockContainer();
+
+  var Utils = require('select2/utils');
+  var Options = require('select2/options');
+
+  var Results = require('select2/results');
+  var InfiniteScroll = require('select2/dropdown/infiniteScroll');
+
+  var InfiniteScrollResults = Utils.Decorate(Results, InfiniteScroll);
+
+  var results = new InfiniteScrollResults($select, new Options({}));
+
+  // Fake the data adapter for the `setClasses` method
+  results.data = {};
+  results.data.current = function (callback) {
+    callback([{ id: 'test' }]);
+  };
+
+  $('#qunit-fixture').append(results.render());
+
+  results.bind(container, $container);
+
+  results.on('query:append', function () {
+    assert.ok(true, 'It tried to load more immediately');
+  });
+
+  container.trigger('results:all', {
+    data: {
+      results: [
+        {
+          id: 'test',
+          text: 'Test'
+        }
+      ],
+      pagination: {
+        more: true
+      }
+    }
+  });
+});
+
+test('loadingMore is not triggered without scrolling', function (assert) {
+  assert.expect(0);
+
+  var $ = require('jquery');
+
+  var $select = $('<select></select>');
+
+  var $container = $('<span></span>');
+  var container = new MockContainer();
+
+  var Utils = require('select2/utils');
+  var Options = require('select2/options');
+
+  var Results = require('select2/results');
+  var InfiniteScroll = require('select2/dropdown/infiniteScroll');
+
+  var InfiniteScrollResults = Utils.Decorate(Results, InfiniteScroll);
+
+  var results = new InfiniteScrollResults($select, new Options({}));
+
+  // Fake the data adapter for the `setClasses` method
+  results.data = {};
+  results.data.current = function (callback) {
+    callback([{ id: 'test' }]);
+  };
+
+  var $results = results.render();
+
+  $('#qunit-fixture').append($results);
+  $results.css('max-height', '100px');
+
+  results.bind(container, $container);
+
+  results.on('query:append', function () {
+    assert.ok(false, 'It tried to load more immediately');
+  });
+
+  container.trigger('results:all', {
+    data: {
+      results: [
+        {
+          id: 'test',
+          text: 'Test'
+        },
+        {
+          id: 'test',
+          text: 'Test'
+        },
+        {
+          id: 'test',
+          text: 'Test'
+        },
+        {
+          id: 'test',
+          text: 'Test'
+        },
+        {
+          id: 'test',
+          text: 'Test'
+        },
+        {
+          id: 'test',
+          text: 'Test'
+        },
+        {
+          id: 'test',
+          text: 'Test'
+        }
+      ],
+      pagination: {
+        more: true
+      }
+    }
+  });
+});

tests/unit-jq1.html

@@ -82,6 +82,7 @@
     <script src="options/width-tests.js" type="text/javascript"></script>
 
     <script src="results/focusing-tests.js" type="text/javascript"></script>
+    <script src="results/infiniteScroll-tests.js" type="text/javascript"></script>
     <script src="results/option-tests.js" type="text/javascript"></script>
 
     <script src="selection/allowClear-tests.js" type="text/javascript"></script>

tests/unit-jq2.html

@@ -82,6 +82,7 @@
     <script src="options/width-tests.js" type="text/javascript"></script>
 
     <script src="results/focusing-tests.js" type="text/javascript"></script>
+    <script src="results/infiniteScroll-tests.js" type="text/javascript"></script>
     <script src="results/option-tests.js" type="text/javascript"></script>
 
     <script src="selection/allowClear-tests.js" type="text/javascript"></script>

tests/unit-jq3.html

@@ -82,6 +82,7 @@
     <script src="options/width-tests.js" type="text/javascript"></script>
 
     <script src="results/focusing-tests.js" type="text/javascript"></script>
+    <script src="results/infiniteScroll-tests.js" type="text/javascript"></script>
     <script src="results/option-tests.js" type="text/javascript"></script>
 
     <script src="selection/allowClear-tests.js" type="text/javascript"></script>