Select2 now clears the internal ID when it is destroyed (select2#5587)

This fixes a bug where if you cloned a Select2, the internal ID used
for mapping elements (specifically the `<select>`) to the in-memory
data store would be cloned as well, causing issues when you tried to
initialize Select2 on the cloned element. This was because we did not
properly clear all of the internal data and all of the internal
attributes that Select2 uses when we destroyed it. The internal
`data-select2-id` attribute was not being cleared, and this was the
attribute being used for the internal mapping.

Now we properly clear the `data-select2-id` attribute from the element
when we call `RemoveData` on the element. This aligns with what we
were trying to do, since we previously cleared out the internal store
for that ID, and fixes the issue we were seeing when cloning.

Fixes select2#5247

Author: kevin-brown

src/js/select2/utils.js

@@ -332,6 +332,8 @@ define([
     if (Utils.__cache[id] != null) {
       delete Utils.__cache[id];
     }
+
+    element.removeAttribute('data-select2-id');
   };
 
   return Utils;

tests/unit-jq1.html

@@ -94,6 +94,7 @@
     <script src="selection/single-tests.js" type="text/javascript"></script>
     <script src="selection/stopPropagation-tests.js" type="text/javascript"></script>
 
+    <script src="utils/data-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>

tests/unit-jq2.html

@@ -94,6 +94,7 @@
     <script src="selection/single-tests.js" type="text/javascript"></script>
     <script src="selection/stopPropagation-tests.js" type="text/javascript"></script>
 
+    <script src="utils/data-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>

tests/unit-jq3.html

@@ -94,6 +94,7 @@
     <script src="selection/single-tests.js" type="text/javascript"></script>
     <script src="selection/stopPropagation-tests.js" type="text/javascript"></script>
 
+    <script src="utils/data-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>

tests/utils/data-tests.js

@@ -0,0 +1,36 @@
+module('Utils - RemoveData');
+
+var $ = require('jquery');
+var Utils = require('select2/utils');
+
+test('The data-select2-id attribute is removed', function (assert) {
+    var $element = $('<select data-select2-id="test"></select>');
+
+    Utils.RemoveData($element[0]);
+
+    assert.notEqual(
+        $element.attr('data-select2-id'),
+        'test',
+        'The internal attribute was not removed when the data was cleared'
+    );
+});
+
+test('The internal cache for the element is cleared', function (assert) {
+    var $element = $('<select data-select2-id="test"></select>');
+
+    Utils.__cache.test = {
+        'foo': 'bar'
+    };
+
+    Utils.RemoveData($element[0]);
+
+    assert.equal(Utils.__cache.test, null, 'The cache should now be empty');
+});
+
+test('Calling it on an element without data works', function (assert) {
+    assert.expect(0);
+
+    var $element = $('<select></select>');
+
+    Utils.RemoveData($element[0]);
+});