From 5d22c10d081c3fb77221283715d49f59c8ee17c3 Mon Sep 17 00:00:00 2001
From: joke2k <daniele.faraglia@gmail.com>
Date: Sat, 12 Dec 2020 01:27:54 +0000
Subject: [PATCH] tests for dropdown offsets

---
 js/src/dropdown.js                            | 14 ++++----
 js/tests/unit/dropdown.spec.js                | 36 +++++++++++++++++++
 site/content/docs/5.0/components/dropdowns.md |  2 +-
 3 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/js/src/dropdown.js b/js/src/dropdown.js
index 8824935d7..177c7f7d5 100644
--- a/js/src/dropdown.js
+++ b/js/src/dropdown.js
@@ -290,22 +290,22 @@ class Dropdown extends BaseComponent {
   }
 
   _getOffset() {
-    let offset = [0, 0]
+    let { offset } = this._config
 
-    if (!this._config.offset) {
-      return offset
+    if (!offset) {
+      return [0, 0]
     }
 
-    if (typeof this._config.offset === 'number') {
-      offset[0] = this._config.offset
-    } else if (typeof this._config.offset === 'string') {
+    if (typeof offset === 'number') {
+      offset = [offset, 0]
+    } else if (typeof offset === 'string') {
       offset = offset.split(',')
       if (offset.length === 1) {
         offset = [offset[0], 0]
       }
 
       offset = offset.map(val => Number.parseInt(val, 10))
-    } else if (typeof this._config.offset === 'function') {
+    } else if (typeof offset === 'function') {
       offset = (popper, reference, placement) => {
         return offset({ popper, reference, placement }, this._element)
       }
diff --git a/js/tests/unit/dropdown.spec.js b/js/tests/unit/dropdown.spec.js
index d2171f369..c59cd3b02 100644
--- a/js/tests/unit/dropdown.spec.js
+++ b/js/tests/unit/dropdown.spec.js
@@ -54,6 +54,42 @@ describe('Dropdown', () => {
       expect(dropdown.toggle).toHaveBeenCalled()
     })
 
+    it('should create offset modifier correctly when offset option is a function', () => {
+      fixtureEl.innerHTML = [
+        '<div class="dropdown">',
+        '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
+        '  <div class="dropdown-menu">',
+        '    <a class="dropdown-item" href="#">Secondary link</a>',
+        '  </div>',
+        '</div>'
+      ].join('')
+
+      const getOffset = () => [10, 20]
+      const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
+      const dropdown = new Dropdown(btnDropdown, {
+        offset: getOffset
+      })
+      const offset = dropdown._getOffset()
+
+      expect(typeof offset).toEqual('function')
+    })
+
+    it('should create offset modifier correctly when offset option is a string into data attribute', () => {
+      fixtureEl.innerHTML = [
+        '<div class="dropdown">',
+        '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown" data-bs-offset="10,20">Dropdown</button>',
+        '  <div class="dropdown-menu">',
+        '    <a class="dropdown-item" href="#">Secondary link</a>',
+        '  </div>',
+        '</div>'
+      ].join('')
+
+      const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
+      const dropdown = new Dropdown(btnDropdown)
+
+      expect(dropdown._getOffset()).toEqual([10, 20])
+    })
+
     it('should allow to pass config to Popper with `popperConfig`', () => {
       fixtureEl.innerHTML = [
         '<div class="dropdown">',
diff --git a/site/content/docs/5.0/components/dropdowns.md b/site/content/docs/5.0/components/dropdowns.md
index 416b80fd0..948eedeb8 100644
--- a/site/content/docs/5.0/components/dropdowns.md
+++ b/site/content/docs/5.0/components/dropdowns.md
@@ -899,7 +899,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
     <tr>
       <td><code>offset</code></td>
       <td>number | string | function</td>
-      <td><code>0</code></td>
+      <td><code>"0,0"</code></td>
       <td>
         <p>Offset of the dropdown relative to its target.</p>
           <p>When a function is used to determine the offset, it is called with an object containing the popper offsets object data as its first argument. The function must return an array with two numbers: <code>[skidding, distance]</code>. The triggering element DOM node is passed as the second argument.</p>