Merge pull request #1910 from shentao/1909-wouldve-been-nice-to-make-teleport-an-option

Make teleport an option via a prop

Author: mattelen

documentation/src/components/Props.vue

@@ -317,6 +317,12 @@
           <td class="table__td"><kbd>false</kbd></td>
           <td class="table__td">Passes the Boolean value to the inbuilt <kbd>input</kbd> element.<br /><b>Added in v3.1.0</b></td>
         </tr>
+        <tr class="table__tr">
+          <td class="table__td"><strong>useTeleport</strong></td>
+          <td class="table__td">Boolean</td>
+          <td class="table__td"><kbd>false</kbd></td>
+          <td class="table__td">Uses Vue Teleport's feature. Teleports the open dropdown to the bottom of the <kbd>body</kbd> element.<br /><b>Added in v3.4.0</b></td>
+        </tr>
         <tr class="table__tr">
           <td class="table__td utils--center" colspan="4"><strong>pointerMixin.js</strong></td>
         </tr>

src/Multiselect.vue

@@ -92,7 +92,7 @@
         </slot>
       </span>
     </div>
-    <teleport to="body">
+    <teleport to="body" :disabled="!useTeleport">
       <transition name="multiselect">
         <div
           class="multiselect__content-wrapper"
@@ -337,6 +337,15 @@ export default {
     required: {
       type: Boolean,
       default: false
+    },
+    /**
+     * Uses Vue Teleport's feature. Teleports the open dropdown to the bottom of the body element
+     * @default false
+     * @type {Boolean}
+     */
+    useTeleport: {
+      type: Boolean,
+      default: false
     }
   },
   data () {
@@ -429,18 +438,23 @@ export default {
   watch: {
     isOpen (val) {
       if (val) {
-        this.ready = false
-        this.$nextTick(() => {
-          const rect = this.$el.getBoundingClientRect()
-          this.dropdownStyles = {
-            position: 'absolute',
-            top: `${rect.bottom + window.scrollY}px`,
-            left: `${rect.left + window.scrollX}px`,
-            width: `${rect.width}px`,
-            zIndex: 9999
-          }
+        if (this.useTeleport) {
+          this.ready = false
+          // This helps with the positioning of the open dropdown when teleport is being used
+          this.$nextTick(() => {
+            const rect = this.$el.getBoundingClientRect()
+            this.dropdownStyles = {
+              position: 'absolute',
+              top: `${rect.bottom + window.scrollY}px`,
+              left: `${rect.left + window.scrollX}px`,
+              width: `${rect.width}px`,
+              zIndex: 9999
+            }
+            this.ready = true
+          })
+        } else {
           this.ready = true
-        })
+        }
       }
     }
   }