Fixes #5169 and adds tests for different jQuery versions

select2 · Jan 2, 2018 · 9a234ce · 9a234ce
1 parent 50d3624
commit 9a234ce
Show file tree

Hide file tree

Showing 7 changed files with 9,290 additions and 0 deletions.
diff --git a/src/js/select2/options.js b/src/js/select2/options.js
@@ -6,9 +6,21 @@ define([
 ], function (require, $, Defaults, Utils) {
   function Options (options, $element) {
     this.options = options;
+    this.jQuery1x = false;
+    this.elementData = null;
+
+    // Html already attempted to be read from html5-* attribs.
+    this.attemptedHtml5DataItems = {};
 
     if ($element != null) {
+      // Override `options` with html5 data-* attribs if any.
       this.fromElement($element);
+
+      // Prefetch properties. 
+      for(var propertyName in Defaults.defaults) {
+        this.get(propertyName);
+     }
+
     }
 
     this.options = Defaults.apply(this.options);
@@ -87,6 +99,7 @@ define([
     // Prefer the element's `dataset` attribute if it exists
     // jQuery 1.x does not correctly handle data attributes with multiple dashes
     if ($.fn.jquery && $.fn.jquery.substr(0, 2) == '1.' && $e[0].dataset) {
+      this.jQuery1x = true;
       dataset = $.extend(true, {}, $e[0].dataset, Utils.GetData($e[0]));
     } else {
       dataset = Utils.GetData($e[0]);
@@ -108,10 +121,36 @@ define([
       }
     }
 
+    // Store normalized element data for later retrieval.
+    this.elementData = Utils._convertData($e.data());
+
     return this;
   };
 
   Options.prototype.get = function (key) {
+
+    if (!this.elementData || this.attemptedHtml5DataItems[key]) {
+      return this.options[key];
+    }
+    // If the option value is stored in html5 data-* attribs,
+    // fetch the value and store it for performance.
+    if (!this.jQuery1x) {      
+      // For jQuery 1.x, the html5 data-* attribs have already 
+      // been parsed above.
+      // Read all attribs that start with `key`.  
+      for (var dataKey in this.elementData) {
+        if (dataKey.indexOf(key) === 0) {
+
+          if ($.isPlainObject(this.options[key])) {
+            $.extend(this.options[key], this.elementData[dataKey]);
+          } else {
+            this.options[key] = this.elementData[dataKey];
+          }
+        }
+      }
+    }
+    // Mark as attempted.
+    this.attemptedHtml5DataItems[key] = true; 
     return this.options[key];
   };
 

diff --git a/tests/integration.html → tests/integration-jquery1x.html b/tests/integration.html → tests/integration-jquery1x.html
diff --git a/tests/integration-jquery2x.html b/tests/integration-jquery2x.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<html>
+  <head>
+    <link rel="stylesheet" href="vendor/qunit-1.23.1.css" type="text/css" />
+    <link rel="stylesheet" href="../../dist/css/select2.css" type="text/css" />
+  </head>
+  <body>
+    <div id="qunit"></div>
+    <div id="qunit-fixture"></div>
+
+    <script src="vendor/qunit-1.23.1.js" type="text/javascript"></script>
+    <script src="vendor/jquery-2.1.0.js" type="text/javascript"></script>
+    <script src="../dist/js/select2.full.js" type="text/javascript"></script>
+
+    <script src="helpers.js" type="text/javascript"></script>
+
+    <script src="integration/dom-changes.js" type="text/javascript"></script>
+    <script src="integration/jquery-calls.js" type="text/javascript"></script>
+    <script src="integration/select2-methods.js" type="text/javascript"></script>
+  </body>
+</html>
diff --git a/tests/options/deprecated-tests.js b/tests/options/deprecated-tests.js
@@ -248,3 +248,27 @@ test('converted select2-tags to data/tags automatically', function (assert) {
     'The `data` key is created with the original data'
   );
 });
+
+test('parsed ajax--url to ajax--cache correctly', function (assert) {
+  var $test = $('<select data-ajax--url="test://url"' +
+                'data-ajax--cache="true"></select>');
+  var options = new Options({}, $test);
+
+  assert.ok(
+    options.get('ajax'),
+    'The `ajax` key was automatically created'
+  );
+  assert.equal(
+    options.get('ajax').url,
+    'test://url',
+    'The `url` property for the `ajax` option was filled in correctly'
+  );
+
+  // NOTE: .dataset always returns a string, whereas .data can return
+  // a boolean directly, so account for the difference.
+  assert.equal(
+    options.get('ajax').cache,
+    $.fn.jquery && $.fn.jquery.substr(0, 2) == '1.' ? 'true' : true,
+    'The `cache` property for the `ajax` option was filled in correctly'
+  );  
+});
diff --git a/tests/unit.html → tests/unit-jquery1x.html b/tests/unit.html → tests/unit-jquery1x.html
diff --git a/tests/unit-jquery2x.html b/tests/unit-jquery2x.html
@@ -0,0 +1,95 @@
+<!doctype html>
+<html>
+  <head>
+    <link rel="stylesheet" href="vendor/qunit-1.23.1.css" type="text/css" />
+    <link rel="stylesheet" href="../../dist/css/select2.css" type="text/css" />
+  </head>
+  <body>
+    <div id="qunit"></div>
+    <div id="qunit-fixture">
+      <div class="event-container">
+        <select></select>
+      </div>
+
+      <select class="single">
+        <option>One</option>
+      </select>
+
+      <select class="single-empty"></select>
+
+      <select class="single-with-placeholder">
+        <option>placeholder</option>
+        <option>One</option>
+      </select>
+
+      <select class="multiple" multiple="multiple">
+        <option>One</option>
+        <option>Two</option>
+      </select>
+
+      <select class="groups">
+        <optgroup label="Test">
+          <option value="one">One</option>
+          <option value="two">Two</option>
+        </optgroup>
+        <optgroup label="Empty"></optgroup>
+      </select>
+
+      <select class="duplicates">
+        <option value="one">One</option>
+        <option value="two">Two</option>
+        <option value="one">Uno</option>
+      </select>
+
+      <select class="duplicates-multi" multiple="multiple">
+        <option value="one">One</option>
+        <option value="two">Two</option>
+        <option value="one">Uno</option>
+      </select>
+    </div>
+
+    <script src="vendor/qunit-1.23.1.js" type="text/javascript"></script>
+    <script src="vendor/jquery-2.1.0.js" type="text/javascript"></script>
+    <script src="../dist/js/select2.full.js" type="text/javascript"></script>
+
+    <script src="helpers.js" type="text/javascript"></script>
+
+    <script src="a11y/selection-tests.js" type="text/javascript"></script>
+    <script src="a11y/search-tests.js" type="text/javascript"></script>
+
+    <script src="data/array-tests.js" type="text/javascript"></script>
+    <script src="data/base-tests.js" type="text/javascript"></script>
+    <script src="data/inputData-tests.js" type="text/javascript"></script>
+    <script src="data/select-tests.js" type="text/javascript"></script>
+    <script src="data/tags-tests.js" type="text/javascript"></script>
+    <script src="data/tokenizer-tests.js" type="text/javascript"></script>
+
+    <script src="data/maximumInputLength-tests.js" type="text/javascript"></script>
+    <script src="data/maximumSelectionLength-tests.js" type="text/javascript"></script>
+    <script src="data/minimumInputLength-tests.js" type="text/javascript"></script>
+
+    <script src="dropdown/dropdownCss-tests.js" type="text/javascript"></script>
+    <script src="dropdown/positioning-tests.js" type="text/javascript"></script>
+    <script src="dropdown/selectOnClose-tests.js" type="text/javascript"></script>
+    <script src="dropdown/stopPropagation-tests.js" type="text/javascript"></script>
+
+    <script src="options/ajax-tests.js" type="text/javascript"></script>
+    <script src="options/data-tests.js" type="text/javascript"></script>
+    <script src="options/deprecated-tests.js" type="text/javascript"></script>
+    <script src="options/translation-tests.js" type="text/javascript"></script>
+    <script src="options/width-tests.js" type="text/javascript"></script>
+
+    <script src="results/focusing-tests.js" type="text/javascript"></script>
+
+    <script src="selection/allowClear-tests.js" type="text/javascript"></script>
+    <script src="selection/containerCss-tests.js" type="text/javascript"></script>
+    <script src="selection/multiple-tests.js" type="text/javascript"></script>
+    <script src="selection/placeholder-tests.js" type="text/javascript"></script>
+    <script src="selection/search-tests.js" type="text/javascript"></script>
+    <script src="selection/single-tests.js" type="text/javascript"></script>
+    <script src="selection/stopPropagation-tests.js" type="text/javascript"></script>
+
+    <script src="utils/decorator-tests.js" type="text/javascript"></script>
+    <script src="utils/escapeMarkup-tests.js" type="text/javascript"></script>
+  </body>
+</html>