dropdown: add boundary config option (#24976)

1 files changed, 15 insertions, 3 deletions

diff --git a/js/src/dropdown.js b/js/src/dropdown.js
index 8affedc6c..56559b434 100644
--- a/js/src/dropdown.js
+++ b/js/src/dropdown.js
@@ -50,7 +50,8 @@ const Dropdown = (($) => {
     DROPRIGHT : 'dropright',
     DROPLEFT  : 'dropleft',
     MENURIGHT : 'dropdown-menu-right',
-    MENULEFT  : 'dropdown-menu-left'
+    MENULEFT  : 'dropdown-menu-left',
+    POSITION_STATIC : 'position-static'
   }
 
   const Selector = {
@@ -74,12 +75,14 @@ const Dropdown = (($) => {
 
   const Default = {
     offset      : 0,
-    flip        : true
+    flip        : true,
+    boundary    : 'scrollParent'
   }
 
   const DefaultType = {
     offset      : '(number|string|function)',
-    flip        : 'boolean'
+    flip        : 'boolean',
+    boundary    : '(string|element)'
   }
 
 
@@ -159,6 +162,12 @@ const Dropdown = (($) => {
             element = parent
           }
         }
+        // If boundary is not `scrollParent`, then set position to `static`
+        // to allow the menu to "escape" the scroll parent's boundaries
+        // https://github.com/twbs/bootstrap/issues/24251
+        if (this._config.boundary !== 'scrollParent') {
+          $(parent).addClass(ClassName.POSITION_STATIC)
+        }
         this._popper = new Popper(element, this._menu, this._getPopperConfig())
       }
 
@@ -276,6 +285,9 @@ const Dropdown = (($) => {
           offset : offsetConf,
           flip : {
             enabled : this._config.flip
+          },
+          preventOverflow : {
+            boundariesElement : this._config.boundary
           }
         }
       }