fix(dropdown): use class position-static instead of inline style (bootstrap-vue#1451)

tmorehouse · web-flow · commit fc493259aee8 · 2017-12-12T00:12:23.000-04:00
diff --git a/src/components/dropdown/dropdown.js b/src/components/dropdown/dropdown.js
@@ -73,7 +73,7 @@ export default {
     )
     return h(
       'div',
-      { attrs: { id: t.safeId() }, class: t.dropdownClasses, style: t.dropdownStyles },
+      { attrs: { id: t.safeId() }, class: t.dropdownClasses },
       [ split, toggle, menu ]
     )
   },
@@ -111,24 +111,21 @@ export default {
   },
   computed: {
     dropdownClasses () {
+      let position = ''
+      // Position `static` is needed to allow menu to "breakout" of the scrollParent boundaries
+      // See https://github.com/twbs/bootstrap/issues/24251#issuecomment-341413786
+      if (this.boundary === 'scrollParent' || !this.boundary) {
+        position = 'position-static'
+      }
       return [
         'btn-group',
         'b-dropdown',
         'dropdown',
         this.dropup ? 'dropup' : '',
-        this.visible ? 'show' : ''
+        this.visible ? 'show' : '',
+        position
       ]
     },
-    dropdownStyles () {
-      // Position `static` is needed to allow menu to "breakout" of the scrollParent boundaries
-      // See https://github.com/twbs/bootstrap/issues/24251#issuecomment-341413786
-      if (this.boundary === 'scrollParent' || !this.boundary) {
-        return {}
-      }
-      // We enable this feature only when the user supplies a boundary other than `scrollParent`
-      // to preserve default functionality
-      return { position: 'static' }
-    },
     menuClasses () {
       return [
         'dropdown-menu',
diff --git a/src/components/dropdown/dropdown.spec.js b/src/components/dropdown/dropdown.spec.js
@@ -58,7 +58,21 @@ describe('dropdown', async () => {
       .find(node => node.tagName === 'BUTTON' && node.id === `${dd_8.safeId('_BV_toggle_')}`)
     expect(toggle).toHaveClass('dropdown-toggle')
   })
+  /*
+  it('boundary set to viewport should have class position-static', async () => {
+    const {app: {$refs}} = window
+    const {dd_9} = $refs
+
+    expect(dd_9).toHaveClass('position-static')
+  })
 
+  it('boundary not set should not have class position-static', async () => {
+    const {app: {$refs}} = window
+    const {dd_1} = $refs
+
+    expect(dd_1).not.toHaveClass('position-static')
+  })
+  */
   it('dd-item should render as link by default', async () => {
     const {app: {$refs}} = window
     const {dd_6} = $refs
diff --git a/src/components/dropdown/fixtures/dropdown.html b/src/components/dropdown/fixtures/dropdown.html
@@ -9,8 +9,7 @@
         <b-dropdown-item href="#">Something else here</b-dropdown-item>
     </b-dropdown>
 
-    <br>
-    <br>
+    <br><br>
 
     <b-dropdown ref="dd_2"
                 text="Split Dropdown Button"
@@ -22,8 +21,7 @@
         <b-dropdown-item href="#">Something else here...</b-dropdown-item>
     </b-dropdown>
 
-    <br>
-    <br>
+    <br><br>
 
     <b-dropdown ref="dd_3"
                 text="Right align"
@@ -35,8 +33,7 @@
         <b-dropdown-item href="#">Something else here</b-dropdown-item>
     </b-dropdown>
 
-    <br>
-    <br>
+    <br><br>
 
     <b-dropdown ref="dd_4"
                 text="Drop-Up"
@@ -48,8 +45,7 @@
         <b-dropdown-item href="#">Something else here</b-dropdown-item>
     </b-dropdown>
 
-    <br>
-    <br>
+    <br><br>
 
     <b-dd ref="dd_5"
           text="Link"
@@ -68,6 +64,8 @@
         <b-dropdown-divider></b-dropdown-divider>
     </b-dropdown>
 
+    <br><br>
+
     <b-dropdown ref="dd_7" text="Dropdown" variant="link" no-caret>
         <template slot="button-content">
           <span>icon</span>
@@ -78,9 +76,18 @@
         <b-dropdown-item href="#">Something else here...</b-dropdown-item>
     </b-dropdown>
 
+    <br><br>
+
     <b-dropdown ref="dd_8" text="Dropdown" no-caret split>
         <b-dropdown-item href="#">Action</b-dropdown-item>
         <b-dropdown-item href="#">Another action</b-dropdown-item>
         <b-dropdown-item href="#">Something else here...</b-dropdown-item>
     </b-dropdown>
+
+    <br><br>
+
+    <b-dropdown ref="dd_9" text="Dropdown" boundary="viewport">
+        <b-dropdown-item href="#">Action</b-dropdown-item>
+        <b-dropdown-item href="#">Another action</b-dropdown-item>
+    </b-dropdown>
 </div>
