Add container option to our Dropdowns

Author: Johann-S

docs/4.0/components/dropdowns.md

@@ -598,6 +598,12 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
       <td>true</td>
       <td>Allow Dropdown to flip in case of an overlapping on the reference element. For more information refer to Popper.js's <a href="https://popper.js.org/popper-documentation.html#modifiers..flip.enabled">flip docs</a>.</td>
     </tr>
+    <tr>
+      <td>container</td>
+      <td>boolean | string | element</td>
+      <td>false</td>
+      <td>Appends the dropdown to a specific element. Example: <code>container: 'body'</code>.</td>
+    </tr>
   </tbody>
 </table>
 

js/src/dropdown.js

@@ -76,12 +76,14 @@ const Dropdown = (() => {
 
   const Default = {
     offset      : 0,
-    flip        : true
+    flip        : true,
+    container   : false
   }
 
   const DefaultType = {
     offset      : '(number|string|function)',
-    flip        : 'boolean'
+    flip        : 'boolean',
+    container   : '(boolean|string|element)'
   }
 
 
@@ -152,6 +154,9 @@ const Dropdown = (() => {
           element = parent
         }
       }
+      if (Util.isElement(this._config.container)) {
+        $(this._config.container).append(this._menu)
+      }
       this._popper = new Popper(element, this._menu, this._getPopperConfig())
 
       // if this is a touch-enabled device we add extra
@@ -214,6 +219,16 @@ const Dropdown = (() => {
         this.constructor.DefaultType
       )
 
+      if (Util.isElement(config.container) || typeof config.container === 'string') {
+        // if it's a jQuery object or a collection of elements
+        if (typeof config.container.jquery === 'string' && typeof config.container[0] !== 'undefined') {
+          config.container = config.container[0]
+        } else if (typeof config.container === 'string') {
+          const tmpContainer = $(document).find(config.container)
+          config.container   = typeof tmpContainer[0] !== 'undefined' ? tmpContainer[0] : false
+        }
+      }
+
       return config
     }
 
@@ -337,6 +352,9 @@ const Dropdown = (() => {
         }
 
         toggles[i].setAttribute('aria-expanded', 'false')
+        if (Util.isElement(context._config.container)) {
+          $(parent).append(context._menu)
+        }
 
         $(dropdownMenu).removeClass(ClassName.SHOW)
         $(parent)

js/tests/visual/dropdown.html

@@ -92,6 +92,16 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
               <button class="dropdown-item" type="button">Something else here</button>
             </div>
           </div>
+          <div class="btn-group">
+            <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-container="body" aria-haspopup="true" aria-expanded="false">
+              This dropdown's use container option
+            </button>
+            <div class="dropdown-menu">
+              <button class="dropdown-item" type="button">Action</button>
+              <button class="dropdown-item" type="button">Another action</button>
+              <button class="dropdown-item" type="button">Something else here</button>
+            </div>
+          </div>
         </div>
         <div class="col-sm-12 mt-4">
           <div class="btn-group dropup" role="group">