Skip to content

Commit 650035c

Browse files
kevin-brownkevin-brown
authored
Restore compatibility with data-* attributes in jQuery 2.x (#5486)
* Start running tests against jQuery 2.x We were only running tests against jQuery 1.x before and they were all passing. This was a problem because apparently all of the data-* attribute tests fail in jQuery 2.x. We are now running both the integration and unit tests against both jQuery 1.x and jQuery 2.x. Right now this resulted in a complete duplication of the test files because there wasn't an obvious way to run the tests against both versions. We're going to look into removing this duplication in the future once the current issues are fixed. We are also going to look into testing against jQuery 3.x in the future, since that is also a supported line of jQuery. * Force the data-* attributes to be parsed There was a change made that switched us from using `$.data` and `$.fn.data` internally to using an internal data store (managed through internal utilities). This had the unfortunate side effect of breaking the automatic loading of data-* options in versions of jQuery other than 1.x, which included anything that would be considered modern jQuery. While the change was made and approved in good faith, all of the tests passed and the docs pages appeared to be working, the tests really failed when running on newer versions of jQuery. This was confirmed when we started running automated tests against both versions, which confirmed the bug that others have been seeing for a while. The change was made becuase calling `$.fn.data` on an element which contains a reference to itself in the internal jQuery data cache would cause a stack overflow. This bug was well documented at the following GitHub ticket and was resolved by no longer using `$.fn.data`: #4014 Unfortunately because `$.fn.data` was no longer being called in a way such that all of the data attributes would be dumped out, we needed to find a replacement. The substitute that was given in the original bug fix worked when the data cache was fully primed, but we never primed it anywhere so it actually failed in the general case. That meant we needed to find a way to manually prime it, which is exactly what this change does. * Clean up select2/utils
1 parent 9f8b6ff commit 650035c

File tree

7 files changed

+9970
-14
lines changed

7 files changed

+9970
-14
lines changed

‎src/js/select2/options.js

+28-5
Original file line numberDiff line numberDiff line change
@@ -79,20 +79,43 @@ define([
7979

8080
$e.attr('ajax--url', Utils.GetData($e[0], 'ajaxUrl'));
8181
Utils.StoreData($e[0], 'ajax-Url', Utils.GetData($e[0], 'ajaxUrl'));
82-
8382
}
8483

8584
var dataset = {};
8685

86+
function upperCaseLetter(_, letter) {
87+
return letter.toUpperCase();
88+
}
89+
90+
// Pre-load all of the attributes which are prefixed with `data-`
91+
for (var attr = 0; attr < $e[0].attributes.length; attr++) {
92+
var attributeName = $e[0].attributes[attr].name;
93+
var prefix = 'data-';
94+
95+
if (attributeName.substr(0, prefix.length) == prefix) {
96+
// Get the contents of the attribute after `data-`
97+
var dataName = attributeName.substring(prefix.length);
98+
99+
// Get the data contents from the consistent source
100+
// This is more than likely the jQuery data helper
101+
var dataValue = Utils.GetData($e[0], dataName);
102+
103+
// camelCase the attribute name to match the spec
104+
var camelDataName = dataName.replace(/-([a-z])/g, upperCaseLetter);
105+
106+
// Store the data attribute contents into the dataset since
107+
dataset[camelDataName] = dataValue;
108+
}
109+
}
110+
87111
// Prefer the element's `dataset` attribute if it exists
88112
// jQuery 1.x does not correctly handle data attributes with multiple dashes
89113
if ($.fn.jquery && $.fn.jquery.substr(0, 2) == '1.' && $e[0].dataset) {
90-
dataset = $.extend(true, {}, $e[0].dataset, Utils.GetData($e[0]));
91-
} else {
92-
dataset = Utils.GetData($e[0]);
114+
dataset = $.extend(true, {}, $e[0].dataset, dataset);
93115
}
94116

95-
var data = $.extend(true, {}, dataset);
117+
// Prefer our internal data cache if it exists
118+
var data = $.extend(true, {}, Utils.GetData($e[0]), dataset);
96119

97120
data = Utils._convertData(data);
98121

‎src/js/select2/utils.js

+10-9
Original file line numberDiff line numberDiff line change
@@ -277,9 +277,9 @@ define([
277277

278278
var id = 0;
279279
Utils.GetUniqueElementId = function (element) {
280-
// Get a unique element Id. If element has no id,
281-
// creates a new unique number, stores it in the id
282-
// attribute and returns the new id.
280+
// Get a unique element Id. If element has no id,
281+
// creates a new unique number, stores it in the id
282+
// attribute and returns the new id.
283283
// If an id already exists, it simply returns it.
284284

285285
var select2Id = element.getAttribute('data-select2-id');
@@ -298,7 +298,7 @@ define([
298298

299299
Utils.StoreData = function (element, name, value) {
300300
// Stores an item in the cache for a specified element.
301-
// name is the cache key.
301+
// name is the cache key.
302302
var id = Utils.GetUniqueElementId(element);
303303
if (!Utils.__cache[id]) {
304304
Utils.__cache[id] = {};
@@ -309,19 +309,20 @@ define([
309309

310310
Utils.GetData = function (element, name) {
311311
// Retrieves a value from the cache by its key (name)
312-
// name is optional. If no name specified, return
312+
// name is optional. If no name specified, return
313313
// all cache items for the specified element.
314314
// and for a specified element.
315315
var id = Utils.GetUniqueElementId(element);
316316
if (name) {
317317
if (Utils.__cache[id]) {
318-
return Utils.__cache[id][name] != null ?
319-
Utils.__cache[id][name]:
320-
$(element).data(name); // Fallback to HTML5 data attribs.
318+
if (Utils.__cache[id][name] != null) {
319+
return Utils.__cache[id][name];
320+
}
321+
return $(element).data(name); // Fallback to HTML5 data attribs.
321322
}
322323
return $(element).data(name); // Fallback to HTML5 data attribs.
323324
} else {
324-
return Utils.__cache[id];
325+
return Utils.__cache[id];
325326
}
326327
};
327328

‎tests/integration.html renamed to ‎tests/integration-jq1.html

File renamed without changes.

‎tests/integration-jq2.html

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<link rel="stylesheet" href="vendor/qunit-1.23.1.css" type="text/css" />
5+
<link rel="stylesheet" href="../../dist/css/select2.css" type="text/css" />
6+
</head>
7+
<body>
8+
<div id="qunit"></div>
9+
<div id="qunit-fixture"></div>
10+
11+
<script src="vendor/qunit-1.23.1.js" type="text/javascript"></script>
12+
<script src="vendor/jquery-2.2.4.js" type="text/javascript"></script>
13+
<script src="../dist/js/select2.full.js" type="text/javascript"></script>
14+
15+
<script src="helpers.js" type="text/javascript"></script>
16+
17+
<script src="integration/dom-changes.js" type="text/javascript"></script>
18+
<script src="integration/jquery-calls.js" type="text/javascript"></script>
19+
<script src="integration/select2-methods.js" type="text/javascript"></script>
20+
</body>
21+
</html>

‎tests/unit.html renamed to ‎tests/unit-jq1.html

File renamed without changes.

‎tests/unit-jq2.html

+97
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<link rel="stylesheet" href="vendor/qunit-1.23.1.css" type="text/css" />
5+
<link rel="stylesheet" href="../../dist/css/select2.css" type="text/css" />
6+
</head>
7+
<body>
8+
<div id="qunit"></div>
9+
<div id="qunit-fixture">
10+
<div class="event-container">
11+
<select></select>
12+
</div>
13+
14+
<select class="single">
15+
<option>One</option>
16+
</select>
17+
18+
<select class="single-empty"></select>
19+
20+
<select class="single-with-placeholder">
21+
<option>placeholder</option>
22+
<option>One</option>
23+
</select>
24+
25+
<select class="multiple" multiple="multiple">
26+
<option>One</option>
27+
<option>Two</option>
28+
</select>
29+
30+
<select class="groups">
31+
<optgroup label="Test">
32+
<option value="one">One</option>
33+
<option value="two">Two</option>
34+
</optgroup>
35+
<optgroup label="Empty"></optgroup>
36+
</select>
37+
38+
<select class="duplicates">
39+
<option value="one">One</option>
40+
<option value="two">Two</option>
41+
<option value="one">Uno</option>
42+
</select>
43+
44+
<select class="duplicates-multi" multiple="multiple">
45+
<option value="one">One</option>
46+
<option value="two">Two</option>
47+
<option value="one">Uno</option>
48+
</select>
49+
50+
<select class="user-defined"></select>
51+
</div>
52+
53+
<script src="vendor/qunit-1.23.1.js" type="text/javascript"></script>
54+
<script src="vendor/jquery-2.2.4.js" type="text/javascript"></script>
55+
<script src="../dist/js/select2.full.js" type="text/javascript"></script>
56+
57+
<script src="helpers.js" type="text/javascript"></script>
58+
59+
<script src="a11y/selection-tests.js" type="text/javascript"></script>
60+
<script src="a11y/search-tests.js" type="text/javascript"></script>
61+
62+
<script src="data/array-tests.js" type="text/javascript"></script>
63+
<script src="data/base-tests.js" type="text/javascript"></script>
64+
<script src="data/inputData-tests.js" type="text/javascript"></script>
65+
<script src="data/select-tests.js" type="text/javascript"></script>
66+
<script src="data/tags-tests.js" type="text/javascript"></script>
67+
<script src="data/tokenizer-tests.js" type="text/javascript"></script>
68+
69+
<script src="data/maximumInputLength-tests.js" type="text/javascript"></script>
70+
<script src="data/maximumSelectionLength-tests.js" type="text/javascript"></script>
71+
<script src="data/minimumInputLength-tests.js" type="text/javascript"></script>
72+
73+
<script src="dropdown/dropdownCss-tests.js" type="text/javascript"></script>
74+
<script src="dropdown/positioning-tests.js" type="text/javascript"></script>
75+
<script src="dropdown/selectOnClose-tests.js" type="text/javascript"></script>
76+
<script src="dropdown/stopPropagation-tests.js" type="text/javascript"></script>
77+
78+
<script src="options/ajax-tests.js" type="text/javascript"></script>
79+
<script src="options/data-tests.js" type="text/javascript"></script>
80+
<script src="options/deprecated-tests.js" type="text/javascript"></script>
81+
<script src="options/translation-tests.js" type="text/javascript"></script>
82+
<script src="options/width-tests.js" type="text/javascript"></script>
83+
84+
<script src="results/focusing-tests.js" type="text/javascript"></script>
85+
86+
<script src="selection/allowClear-tests.js" type="text/javascript"></script>
87+
<script src="selection/containerCss-tests.js" type="text/javascript"></script>
88+
<script src="selection/multiple-tests.js" type="text/javascript"></script>
89+
<script src="selection/placeholder-tests.js" type="text/javascript"></script>
90+
<script src="selection/search-tests.js" type="text/javascript"></script>
91+
<script src="selection/single-tests.js" type="text/javascript"></script>
92+
<script src="selection/stopPropagation-tests.js" type="text/javascript"></script>
93+
94+
<script src="utils/decorator-tests.js" type="text/javascript"></script>
95+
<script src="utils/escapeMarkup-tests.js" type="text/javascript"></script>
96+
</body>
97+
</html>

0 commit comments

Comments
 (0)