Move dropdown offset function logic into private function. (#28138)

2 files changed, 68 insertions, 6 deletions

diff --git a/js/src/dropdown.js b/js/src/dropdown.js
index 9aaf5a339e..31deaa725e 100644
--- a/js/src/dropdown.js
+++ b/js/src/dropdown.js
@@ -319,24 +319,30 @@ class Dropdown {
     return $(this._element).closest('.navbar').length > 0
   }
 
-  _getPopperConfig() {
-    const offsetConf = {}
+  _getOffset() {
+    const offset = {}
+
     if (typeof this._config.offset === 'function') {
-      offsetConf.fn = (data) => {
+      offset.fn = (data) => {
         data.offsets = {
           ...data.offsets,
-          ...this._config.offset(data.offsets) || {}
+          ...this._config.offset(data.offsets, this._element) || {}
         }
+
         return data
       }
     } else {
-      offsetConf.offset = this._config.offset
+      offset.offset = this._config.offset
     }
 
+    return offset
+  }
+
+  _getPopperConfig() {
     const popperConfig = {
       placement: this._getPlacement(),
       modifiers: {
-        offset: offsetConf,
+        offset: this._getOffset(),
         flip: {
           enabled: this._config.flip
         },
@@ -352,6 +358,7 @@ class Dropdown {
         enabled: false
       }
     }
+
     return popperConfig
   }
 
diff --git a/js/tests/unit/dropdown.js b/js/tests/unit/dropdown.js
index fd9b7f9629..1ecfd1f8bf 100644
--- a/js/tests/unit/dropdown.js
+++ b/js/tests/unit/dropdown.js
@@ -1361,4 +1361,59 @@ $(function () {
     $dropdown.hide()
     assert.ok($dropdown.parent('.dropdown').hasClass('show'))
   })
+
+  QUnit.test('should create offset modifier correctly when offset option is a function', function (assert) {
+    assert.expect(2)
+
+    var getOffset = function (offsets) {
+      return offsets
+    }
+
+    var dropdownHTML =
+      '<div class="dropdown">' +
+      '  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' +
+      '  <div class="dropdown-menu">' +
+      '    <a class="dropdown-item" href="#">Another link</a>' +
+      '  </div>' +
+      '</div>'
+
+    var $dropdown = $(dropdownHTML)
+      .appendTo('#qunit-fixture')
+      .find('[data-toggle="dropdown"]')
+      .bootstrapDropdown({
+        offset: getOffset
+      })
+
+    var dropdown = $dropdown.data('bs.dropdown')
+    var offset = dropdown._getOffset()
+
+    assert.ok(typeof offset.offset === 'undefined')
+    assert.ok(typeof offset.fn === 'function')
+  })
+
+  QUnit.test('should create offset modifier correctly when offset option is not a function', function (assert) {
+    assert.expect(2)
+
+    var dropdownHTML =
+      '<div class="dropdown">' +
+      '  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' +
+      '  <div class="dropdown-menu">' +
+      '    <a class="dropdown-item" href="#">Another link</a>' +
+      '  </div>' +
+      '</div>'
+
+    var myOffset = 42
+    var $dropdown = $(dropdownHTML)
+      .appendTo('#qunit-fixture')
+      .find('[data-toggle="dropdown"]')
+      .bootstrapDropdown({
+        offset: myOffset
+      })
+
+    var dropdown = $dropdown.data('bs.dropdown')
+    var offset = dropdown._getOffset()
+
+    assert.strictEqual(offset.offset, myOffset)
+    assert.ok(typeof offset.fn === 'undefined')
+  })
 })