From 819b5d5ac70d6192ec1791b1c0610b66a05d7c85 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Wed, 4 Mar 2020 14:36:30 +0300
Subject: [PATCH] Fixed #224 for MultiSelect

---
 src/components/dropdown/Dropdown.vue        |  2 +-
 src/components/multiselect/MultiSelect.d.ts |  1 +
 src/components/multiselect/MultiSelect.vue  | 32 +++++++++++++++++++--
 src/views/multiselect/MultiSelectDoc.vue    |  6 ++++
 4 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/src/components/dropdown/Dropdown.vue b/src/components/dropdown/Dropdown.vue
index f5992f609..c062149bf 100644
--- a/src/components/dropdown/Dropdown.vue
+++ b/src/components/dropdown/Dropdown.vue
@@ -301,7 +301,7 @@ export default {
         alignOverlay() {
             if (this.appendTo) {
                 DomHandler.absolutePosition(this.$refs.overlay, this.$refs.container);
-                this.$refs.overlay.style.width = DomHandler.getOuterWidth(this.$refs.container) + 'px';
+                this.$refs.overlay.style.minWidth = DomHandler.getOuterWidth(this.$refs.container) + 'px';
             } else {
                 DomHandler.relativePosition(this.$refs.overlay, this.$refs.container);
             }
diff --git a/src/components/multiselect/MultiSelect.d.ts b/src/components/multiselect/MultiSelect.d.ts
index 2376ba12b..289d723e5 100644
--- a/src/components/multiselect/MultiSelect.d.ts
+++ b/src/components/multiselect/MultiSelect.d.ts
@@ -14,6 +14,7 @@ export declare class MultiSelect extends Vue {
     dataKey?: string;
     filterPlaceholder?: string;
     ariaLabelledBy?: string;
+    appendTo?: string;
     $emit(eventName: 'input', value: any): this;
     $emit(eventName: 'change', e: {originalEvent: Event, value: any}): this;
     $emit(eventName: 'before-show'): this;
diff --git a/src/components/multiselect/MultiSelect.vue b/src/components/multiselect/MultiSelect.vue
index 4005a9ac5..8495fbed4 100644
--- a/src/components/multiselect/MultiSelect.vue
+++ b/src/components/multiselect/MultiSelect.vue
@@ -74,7 +74,11 @@ export default {
 		tabindex: String,
         dataKey: null,
         filterPlaceholder: String,
-        ariaLabelledBy: null
+        ariaLabelledBy: null,
+        appendTo: {
+            type: String,
+            default: null
+        }
     },
     data() {
         return {
@@ -86,6 +90,7 @@ export default {
     },
     outsideClickListener: null,
     beforeDestroy() {
+        this.restoreAppend();
         this.unbindOutsideClickListener();
     },
     updated() {
@@ -253,6 +258,7 @@ export default {
                 return null;
         },
         onOverlayEnter() {
+            this.appendContainer();
             this.alignOverlay();
             this.bindOutsideClickListener();
             this.$emit('show');
@@ -262,7 +268,13 @@ export default {
             this.$emit('hide');
         },
         alignOverlay() {
-            DomHandler.relativePosition(this.$refs.overlay, this.$refs.container);
+            if (this.appendTo) {
+                DomHandler.absolutePosition(this.$refs.overlay, this.$refs.container);
+                this.$refs.overlay.style.minWidth = DomHandler.getOuterWidth(this.$refs.container) + 'px';
+            }
+            else {
+                DomHandler.relativePosition(this.$refs.overlay, this.$refs.container);
+            }   
         },
         bindOutsideClickListener() {
             if (!this.outsideClickListener) {
@@ -304,6 +316,22 @@ export default {
 
             this.$emit('input', value);
             this.$emit('change', {originalEvent: event, value: value});
+        },
+        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/multiselect/MultiSelectDoc.vue b/src/views/multiselect/MultiSelectDoc.vue
index b33dbad52..8a29ec4b3 100644
--- a/src/views/multiselect/MultiSelectDoc.vue
+++ b/src/views/multiselect/MultiSelectDoc.vue
@@ -153,6 +153,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>