From 0aa6fe79719103c0b35e913f59a135986722986a Mon Sep 17 00:00:00 2001
From: Kevin Brown <kevin@kevin-brown.com>
Date: Fri, 26 Jul 2019 05:50:19 -0400
Subject: [PATCH] Select2 now clears the internal ID when it is destroyed

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 53d82f3d64..4c96034a0c 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 730b35db5f..1ef049c891 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 6ff3b0c22a..031f113c13 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 e38105e3dc..4991d82b2d 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 0000000000..b557fe09bc
--- /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