Escape ID in Util.getSelectorFromElement (#24700)

2 files changed, 27 insertions, 1 deletions

diff --git a/js/src/util.js b/js/src/util.js
index 71f93a7c5..ef2cc3c57 100644
--- a/js/src/util.js
+++ b/js/src/util.js
@@ -87,6 +87,14 @@ const Util = (($) => {
     }
   }
 
+  function escapeId(selector) {
+    // we escape IDs in case of special selectors (selector = '#myId:something')
+    // $.escapeSelector does not exist in jQuery < 3
+    selector = typeof $.escapeSelector === 'function' ? $.escapeSelector(selector).substr(1) :
+      selector.replace(/(:|\.|\[|\]|,|=|@)/g, '\\$1')
+
+    return selector
+  }
 
   /**
    * --------------------------------------------------------------------------
@@ -112,6 +120,11 @@ const Util = (($) => {
         selector = element.getAttribute('href') || ''
       }
 
+      // if it's an ID
+      if (selector.charAt(0) === '#') {
+        selector = escapeId(selector)
+      }
+
       try {
         const $selector = $(document).find(selector)
         return $selector.length > 0 ? selector : null
diff --git a/js/tests/unit/util.js b/js/tests/unit/util.js
index 372c6e3f7..7f590cc33 100644
--- a/js/tests/unit/util.js
+++ b/js/tests/unit/util.js
@@ -4,13 +4,26 @@ $(function () {
   QUnit.module('util')
 
   QUnit.test('Util.getSelectorFromElement should return the correct element', function (assert) {
-    assert.expect(2)
+    assert.expect(5)
+
     var $el = $('<div data-target="body"></div>').appendTo($('#qunit-fixture'))
     assert.strictEqual(Util.getSelectorFromElement($el[0]), 'body')
 
     // not found element
     var $el2 = $('<div data-target="#fakeDiv"></div>').appendTo($('#qunit-fixture'))
     assert.strictEqual(Util.getSelectorFromElement($el2[0]), null)
+
+    // should escape ID and find the correct element
+    var $el3 = $('<div data-target="#collapse:Example"></div>').appendTo($('#qunit-fixture'))
+    $('<div id="collapse:Example"></div>').appendTo($('#qunit-fixture'))
+    assert.strictEqual(Util.getSelectorFromElement($el3[0]), '#collapse\\:Example')
+
+    // if $.escapeSelector doesn't exist in older jQuery versions (< 3)
+    var tmpEscapeSelector = $.escapeSelector
+    delete $.escapeSelector
+    assert.ok(typeof $.escapeSelector === 'undefined', '$.escapeSelector undefined')
+    assert.strictEqual(Util.getSelectorFromElement($el3[0]), '#collapse\\:Example')
+    $.escapeSelector = tmpEscapeSelector
   })
 
   QUnit.test('Util.typeCheckConfig should thrown an error when a bad config is passed', function (assert) {