From 55c5471f76b02045102bea82ddb45acbc596ded4 Mon Sep 17 00:00:00 2001
From: Gerhard <gerhard.jonsson@gmail.com>
Date: Sat, 18 Jan 2020 12:56:53 +0100
Subject: [PATCH] Add appendTo on Dropdown

The Dropdown component now supports the appendTo property.
---
 src/components/dropdown/Dropdown.d.ts |  1 +
 src/components/dropdown/Dropdown.vue  | 31 +++++++++++++++++++++++++--
 src/views/dropdown/DropdownDoc.vue    |  6 ++++++
 3 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/src/components/dropdown/Dropdown.d.ts b/src/components/dropdown/Dropdown.d.ts
index 5cbe0be42..bcf49cf0c 100644
--- a/src/components/dropdown/Dropdown.d.ts
+++ b/src/components/dropdown/Dropdown.d.ts
@@ -16,6 +16,7 @@ export declare class Dropdown extends Vue {
     showClear?: boolean;
     tabindex?: string;
     ariaLabelledBy?: string;
+    appendTo?: string;
     $emit(eventName: 'input', value: string): this;
     $emit(eventName: 'change', e: { originalEvent: Event, value: string }): this;
     $slot: {
diff --git a/src/components/dropdown/Dropdown.vue b/src/components/dropdown/Dropdown.vue
index fa93980f1..aadde1e54 100644
--- a/src/components/dropdown/Dropdown.vue
+++ b/src/components/dropdown/Dropdown.vue
@@ -55,7 +55,11 @@ export default {
         dataKey: null,
 		showClear: Boolean,
         tabindex: String,
-        ariaLabelledBy: null
+        ariaLabelledBy: null,
+        appendTo: {
+            type: String,
+            default: null
+        }
     },
     data() {
         return {
@@ -70,6 +74,7 @@ export default {
     previousSearchChar: null,
     searchValue: null,
     beforeDestroy() {
+        this.restoreAppend();
         this.unbindOutsideClickListener();
     },
     updated() {
@@ -267,6 +272,7 @@ export default {
             this.$emit('input', event.target.value);
         },
         onOverlayEnter() {
+            this.appendContainer();
             this.alignOverlay();
             this.bindOutsideClickListener();
 
@@ -278,7 +284,12 @@ export default {
             this.unbindOutsideClickListener();
         },
         alignOverlay() {
-            DomHandler.relativePosition(this.$refs.overlay, this.$refs.container);
+            if (this.appendTo) {
+                DomHandler.absolutePosition(this.$refs.overlay, this.$refs.container);
+                this.$refs.overlay.style.width = DomHandler.getOuterWidth(this.$refs.container) + 'px';
+            } else {
+                DomHandler.relativePosition(this.$refs.overlay, this.$refs.container);
+            }
         },
         updateModel(event, value) {
             this.$emit('input', value);
@@ -352,6 +363,22 @@ export default {
             }
 
             return null;
+        },
+        appendContainer() {
+            if (this.appendTo) {
+                if (this.appendTo === 'body')
+                    document.body.appendChild(this.$refs.overlay);
+                else
+                    document.getElementById(this.appendTo).appendChild(this.$refs.overlay);
+            }
+        },
+        restoreAppend() {
+            if (this.$refs.overlay && this.appendTo) {
+                if (this.appendTo === 'body')
+                    document.body.removeChild(this.$refs.overlay);
+                else
+                    document.getElementById(this.appendTo).removeChild(this.$refs.overlay);
+            }
         }
     },
     computed: {
diff --git a/src/views/dropdown/DropdownDoc.vue b/src/views/dropdown/DropdownDoc.vue
index 4e180991d..cde97c0c6 100644
--- a/src/views/dropdown/DropdownDoc.vue
+++ b/src/views/dropdown/DropdownDoc.vue
@@ -155,6 +155,12 @@ data() {
                                 <td>string</td>
                                 <td>null</td>
                                 <td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
+                            </tr>
+                            <tr>
+                                <td>appendTo</td>
+                                <td>string</td>
+                                <td>null</td>
+                                <td>Id of the element or "body" for document where the overlay should be appended to.</td>
                             </tr>
 						</tbody>
 					</table>