allow to pass popper.js configuration for tooltip/popover and dropdown

2 files changed, 34 insertions, 3 deletions

diff --git a/js/src/dropdown/dropdown.js b/js/src/dropdown/dropdown.js
index 2c30ba740..26bcf2aa3 100644
--- a/js/src/dropdown/dropdown.js
+++ b/js/src/dropdown/dropdown.js
@@ -83,7 +83,8 @@ const Default = {
   flip: true,
   boundary: 'scrollParent',
   reference: 'toggle',
-  display: 'dynamic'
+  display: 'dynamic',
+  popperConfig: null
 }
 
 const DefaultType = {
@@ -91,7 +92,8 @@ const DefaultType = {
   flip: 'boolean',
   boundary: '(string|element)',
   reference: '(string|element)',
-  display: 'string'
+  display: 'string',
+  popperConfig: '(null|object)'
 }
 
 /**
@@ -339,7 +341,7 @@ class Dropdown {
   }
 
   _getPopperConfig() {
-    const popperConfig = {
+    let popperConfig = {
       placement: this._getPlacement(),
       modifiers: {
         offset: this._getOffset(),
@@ -359,6 +361,13 @@ class Dropdown {
       }
     }
 
+    if (this._config.popperConfig) {
+      popperConfig = {
+        ...popperConfig,
+        ...this._config.popperConfig
+      }
+    }
+
     return popperConfig
   }
 
diff --git a/js/src/dropdown/dropdown.spec.js b/js/src/dropdown/dropdown.spec.js
index 92d8fea03..e99e992f3 100644
--- a/js/src/dropdown/dropdown.spec.js
+++ b/js/src/dropdown/dropdown.spec.js
@@ -99,6 +99,28 @@ describe('Dropdown', () => {
 
       expect(dropdown.toggle).toHaveBeenCalled()
     })
+
+    it('should allow to pass config to popper.js thanks to popperConfig', () => {
+      fixtureEl.innerHTML = [
+        '<div class="dropdown">',
+        '  <button href="#" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
+        '  <div class="dropdown-menu">',
+        '    <a class="dropdown-item" href="#">Secondary link</a>',
+        '  </div>',
+        '</div>'
+      ].join('')
+
+      const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
+      const dropdown = new Dropdown(btnDropdown, {
+        popperConfig: {
+          placement: 'left'
+        }
+      })
+
+      const popperConfig = dropdown._getPopperConfig()
+
+      expect(popperConfig.placement).toEqual('left')
+    })
   })
 
   describe('toggle', () => {