From 5c8890687aa631a315438529346e89f4943d82a8 Mon Sep 17 00:00:00 2001
From: joke2k <daniele.faraglia@gmail.com>
Date: Sat, 12 Dec 2020 00:54:29 +0000
Subject: [PATCH] Restore offset option for dropdown component

---
 js/src/dropdown.js                            | 31 +++++++++++++++++++
 site/content/docs/5.0/components/dropdowns.md | 10 ++++++
 2 files changed, 41 insertions(+)

diff --git a/js/src/dropdown.js b/js/src/dropdown.js
index 4d65008f8..8824935d7 100644
--- a/js/src/dropdown.js
+++ b/js/src/dropdown.js
@@ -289,6 +289,31 @@ class Dropdown extends BaseComponent {
     return this._element.closest(`.${CLASS_NAME_NAVBAR}`) !== null
   }
 
+  _getOffset() {
+    let offset = [0, 0]
+
+    if (!this._config.offset) {
+      return offset
+    }
+
+    if (typeof this._config.offset === 'number') {
+      offset[0] = this._config.offset
+    } else if (typeof this._config.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') {
+      offset = (popper, reference, placement) => {
+        return offset({ popper, reference, placement }, this._element)
+      }
+    }
+
+    return offset
+  }
+
   _getPopperConfig() {
     const popperConfig = {
       placement: this._getPlacement(),
@@ -304,6 +329,12 @@ class Dropdown extends BaseComponent {
         options: {
           fallbackPlacements: ['top', 'right', 'bottom', 'left']
         }
+      },
+      {
+        name: 'offset',
+        options: {
+          offset: this._getOffset()
+        }
       }]
     }
 
diff --git a/site/content/docs/5.0/components/dropdowns.md b/site/content/docs/5.0/components/dropdowns.md
index 50dcde2ba..416b80fd0 100644
--- a/site/content/docs/5.0/components/dropdowns.md
+++ b/site/content/docs/5.0/components/dropdowns.md
@@ -896,6 +896,16 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
       <td><code>'dynamic'</code></td>
       <td>By default, we use Popper for dynamic positioning. Disable this with <code>static</code>.</td>
     </tr>
+    <tr>
+      <td><code>offset</code></td>
+      <td>number | string | function</td>
+      <td><code>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>
+          <p>For more information refer to Popper.js's <a href="https://popper.js.org/docs/v2/modifiers/offset/#options">offset docs</a>.</p>
+      </td>
+    </tr>
     <tr>
       <td><code>popperConfig</code></td>
       <td>null | object</td>