Fix maximumSelectionLength being ignored by closeOnSelect (#5581)

* Rewrote maximumSelectionLength tests to use container

These brings the tests in line with other tests which we have, and
makes it easier to understand what is actually going on in the tests.

This also removes a redundant set of tests where we were testing with
=> 2 options being allowed. There are no current edge cases that would
have required this.

* Fix maximumSelectionLength being ignored by closeOnSelect

There was a bug where the `maximumSelectionLength` option would not
kick in if the `closeOnSelect` option was enabled. Normally, this
was enabled by someone in their global configuration, but it could
also be seen when somoene selected an option while holding the
meta/ctrl/alt keys. This would implicitly enable the `closeOnSelect`
behaviour, even when it was not globally enabled, and cause the bug.

This fixes that issue by listening to the `select` event which is
triggered whenever an option is selected, and triggers the "maximum
selected" message based on that event. This should now force the
message to be displayed, even when the results did not have to be
queried another time.

Fixes #3514
Fixes #3860
Closes #5333

src/js/select2/data/maximumSelectionLength.js

@@ -7,10 +7,30 @@ define([
     decorated.call(this, $e, options);
   }
 
+  MaximumSelectionLength.prototype.bind =
+    function (decorated, container, $container) {
+      var self = this;
+
+      decorated.call(this, container, $container);
+
+      container.on('select', function () {
+        self._checkIfMaximumSelected();
+      });
+  };
+
   MaximumSelectionLength.prototype.query =
     function (decorated, params, callback) {
       var self = this;
 
+      this._checkIfMaximumSelected(function () {
+        decorated.call(self, params, callback);
+      });
+  };
+
+  MaximumSelectionLength.prototype._checkIfMaximumSelected =
+    function (_, successCallback) {
+      var self = this;
+
       this.current(function (currentData) {
         var count = currentData != null ? currentData.length : 0;
         if (self.maximumSelectionLength > 0 &&
@@ -23,7 +43,10 @@ define([
           });
           return;
         }
-        decorated.call(self, params, callback);
+
+        if (successCallback) {
+          successCallback();
+        }
       });
   };
 

tests/data/maximumSelectionLength-tests.js

@@ -1,202 +1,152 @@
 module('Data adapters - Maximum selection length');
 
+var SelectData = require('select2/data/select');
 var MaximumSelectionLength = require('select2/data/maximumSelectionLength');
 
 var $ = require('jquery');
 var Options = require('select2/options');
 var Utils = require('select2/utils');
 
-function MaximumSelectionStub () {
+var MaximumSelectionData = Utils.Decorate(SelectData, MaximumSelectionLength);
-  this.called = false;
-  this.currentData = [];
-}
-
-MaximumSelectionStub.prototype.current = function (callback) {
-  callback(this.currentData);
-};
-
-MaximumSelectionStub.prototype.val = function (val) {
-  this.currentData.push(val);
-};
-
-MaximumSelectionStub.prototype.query = function (params, callback) {
-  this.called = true;
-};
-
-var MaximumSelectionData = Utils.Decorate(
-  MaximumSelectionStub,
-  MaximumSelectionLength
-);
 
 test('0 never displays the notice', function (assert) {
+  assert.expect(3);
+
+  var $select = $('#qunit-fixture .multiple');
+
   var zeroOptions = new Options({
     maximumSelectionLength: 0
   });
 
-  var data = new MaximumSelectionData(null, zeroOptions);
+  var container = new MockContainer();
+  var data = new MaximumSelectionData($select, zeroOptions);
 
-  data.trigger = function () {
+  data.bind(container, null);
-    assert.ok(false, 'No events should be triggered');
+
-  };
+  data.on('results:message', function () {
+    assert.ok(false, 'The message should not be displayed');
+  });
 
   data.query({
     term: ''
+  }, function () {
+    assert.ok(true, 'The results should be queried');
   });
 
-  assert.ok(data.called);
+  $select.val(['One']);
-
-  data = new MaximumSelectionData(null, zeroOptions);
-
-  data.trigger = function () {
-    assert.ok(false, 'No events should be triggered');
-  };
-
-  data.val('1');
 
   data.query({
     term: ''
+  }, function () {
+    assert.ok(true, 'The results should be queried');
   });
 
-  assert.ok(data.called);
+  $select.val(['One', 'Two']);
-
-  data = new MaximumSelectionData(null, zeroOptions);
-
-  data.trigger = function () {
-    assert.ok(false, 'No events should be triggered');
-  };
-
-  data.val('1');
-  data.val('2');
 
   data.query({
     term: ''
+  }, function () {
+    assert.ok(true, 'The results should be queried');
   });
-
-  assert.ok(data.called);
 });
 
 test('< 0 never displays the notice', function (assert) {
+  assert.expect(3);
+
+  var $select = $('#qunit-fixture .multiple');
+
   var negativeOptions = new Options({
     maximumSelectionLength: -1
   });
 
-  var data = new MaximumSelectionData(null, negativeOptions);
+  var container = new MockContainer();
+  var data = new MaximumSelectionData($select, negativeOptions);
 
-  data.trigger = function () {
+  data.bind(container, null);
-    assert.ok(false, 'No events should be triggered');
+
-  };
+  data.on('results:message', function () {
+    assert.ok(false, 'The message should not be displayed');
+  });
 
   data.query({
     term: ''
+  }, function () {
+    assert.ok(true, 'The results should be queried');
   });
 
-  assert.ok(data.called);
+  $select.val(['One']);
-
-  data = new MaximumSelectionData(null, negativeOptions);
-
-  data.trigger = function () {
-    assert.ok(false, 'No events should be triggered');
-  };
-
-  data.val('1');
 
   data.query({
     term: ''
+  }, function () {
+    assert.ok(true, 'The results should be queried');
   });
 
-  assert.ok(data.called);
+  $select.val(['One', 'Two']);
-
-  data = new MaximumSelectionData(null, negativeOptions);
-
-  data.trigger = function () {
-    assert.ok(false, 'No events should be triggered');
-  };
-
-  data.val('1');
-  data.val('2');
 
   data.query({
     term: ''
+  }, function () {
+    assert.ok(true, 'The results should be queried');
   });
-
-  assert.ok(data.called);
 });
 
 test('triggers when >= 1 selection' , function (assert) {
+  assert.expect(2);
+
+  var $select = $('#qunit-fixture .multiple');
+
   var maxOfOneOptions = new Options({
     maximumSelectionLength: 1
   });
-  var data = new MaximumSelectionData(null, maxOfOneOptions);
 
-  data.trigger = function () {
+  var container = new MockContainer();
-    assert.ok(false, 'No events should be triggered');
+  var data = new MaximumSelectionData($select, maxOfOneOptions);
-  };
+
+  data.bind(container, null);
+
+  data.on('results:message', function () {
+    assert.ok(true, 'The message should be displayed');
+  });
+
+  $select.val(['One']);
 
   data.query({
     term: ''
+  }, function () {
+    assert.ok(false, 'The results should not be queried');
   });
 
-  assert.ok(data.called);
+  $select.val(['One', 'Two']);
-
-  data = new MaximumSelectionData(null, maxOfOneOptions);
-
-  data.trigger = function () {
-    assert.ok(true, 'The event should be triggered.');
-  };
-
-  data.val('1');
 
   data.query({
     term: ''
+  }, function () {
+    assert.ok(false, 'The results should not be queried');
+  });
 });
 
-  assert.ok(!data.called);
+test('triggers after selection' , function (assert) {
+  assert.expect(1);
 
+  var $select = $('#qunit-fixture .multiple');
+
+  var maxOfOneOptions = new Options({
+    maximumSelectionLength: 1
   });
 
-test('triggers when >= 2 selections' , function (assert) {
+  var container = new MockContainer();
-  var maxOfTwoOptions = new Options({
+  var data = new MaximumSelectionData($select, maxOfOneOptions);
-    maximumSelectionLength: 2
-  });
-  var data = new MaximumSelectionData(null, maxOfTwoOptions);
 
-  data.trigger = function () {
+  data.bind(container, null);
-    assert.ok(false, 'No events should be triggered');
-  };
 
-  data.query({
+  data.on('results:message', function () {
-    term: ''
+    assert.ok(true, 'The message should be displayed');
   });
 
-  assert.ok(data.called);
+  $select.val(['One']);
 
-  data = new MaximumSelectionData(null, maxOfTwoOptions);
+  container.trigger('select', {
-
+    data: {}
-  data.trigger = function () {
-    assert.ok(false, 'No events should be triggered');
-  };
-
-  data.val('1');
-
-  data.query({
-    term: ''
   });
-
-  assert.ok(data.called);
-
-  data = new MaximumSelectionData(null, maxOfTwoOptions);
-
-  data.trigger = function () {
-    assert.ok(true, 'The event should be triggered.');
-  };
-
-  data.val('1');
-  data.val('2');
-
-  data.query({
-    term: ''
-  });
-
-  assert.ok(!data.called);
-
 });