From 6645ffd4bddcc178c8c1c8588c6b2a93290a4cca Mon Sep 17 00:00:00 2001
From: Kevin Brown <kevin-brown@users.noreply.github.com>
Date: Sat, 27 Jul 2019 21:37:43 -0400
Subject: [PATCH] Select2 now clears the internal ID when it is destroyed
 (#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 #5247
---
 src/js/select2/utils.js   |  2 ++
 tests/unit-jq1.html       |  1 +
 tests/unit-jq2.html       |  1 +
 tests/unit-jq3.html       |  1 +
 tests/utils/data-tests.js | 36 ++++++++++++++++++++++++++++++++++++
 5 files changed, 41 insertions(+)
 create mode 100644 tests/utils/data-tests.js

diff --git a/src/js/select2/utils.js b/src/js/select2/utils.js
index 53d82f3d..4c96034a 100644
--- a/src/js/select2/utils.js
+++ b/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;
diff --git a/tests/unit-jq1.html b/tests/unit-jq1.html
index 730b35db..1ef049c8 100644
--- a/tests/unit-jq1.html
+++ b/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>
diff --git a/tests/unit-jq2.html b/tests/unit-jq2.html
index 6ff3b0c2..031f113c 100644
--- a/tests/unit-jq2.html
+++ b/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>
diff --git a/tests/unit-jq3.html b/tests/unit-jq3.html
index e38105e3..4991d82b 100644
--- a/tests/unit-jq3.html
+++ b/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>
diff --git a/tests/utils/data-tests.js b/tests/utils/data-tests.js
new file mode 100644
index 00000000..b557fe09
--- /dev/null
+++ b/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]);
+});
\ No newline at end of file