Fixed #1185 - Fixed #1185 -

src/AppMenu.vue

@@ -5,7 +5,7 @@
         </router-link>
         <div class="layout-sidebar-filter p-fluid p-input-filled">
             <AutoComplete v-model="selectedRoute" :suggestions="filteredRoutes" @complete="searchRoute($event)" @item-select="onItemSelect($event)" scrollHeight="300px" placeholder="Search" 
-                field="name" optionGroupLabel="name" optionGroupChildren="children">
+                field="name" optionGroupLabel="name" optionGroupChildren="children" appendTo="self">
             </AutoComplete>
         </div>
         <div class="layout-menu">

src/components/autocomplete/AutoComplete.vue

@@ -14,7 +14,7 @@
         </ul>
         <i class="p-autocomplete-loader pi pi-spinner pi-spin" v-if="searching"></i>
         <Button ref="dropdownButton" type="button" icon="pi pi-chevron-down" class="p-autocomplete-dropdown" :disabled="$attrs.disabled" @click="onDropdownClick" v-if="dropdown"/>
-        <Teleport :to="appendTo">
+        <Teleport :to="appendTarget" :disabled="appendDisabled">
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
                 <div :ref="overlayRef" :class="panelStyleClass" :style="{'max-height': scrollHeight}" v-if="overlayVisible" @click="onOverlayClick">
                     <slot name="header" :value="modelValue" :suggestions="suggestions"></slot>
@@ -174,8 +174,13 @@ export default {
         },
         alignOverlay() {
             let target = this.multiple ? this.$refs.multiContainer : this.$refs.input;
-            this.overlay.style.minWidth = DomHandler.getOuterWidth(target) + 'px';
+            if (this.appendDisabled) {
-            DomHandler.absolutePosition(this.overlay, target);
+                DomHandler.relativePosition(this.overlay, target);
+            }
+            else {
+                this.overlay.style.minWidth = DomHandler.getOuterWidth(target) + 'px';
+                DomHandler.absolutePosition(this.overlay, target);
+            }                
         },
         bindOutsideClickListener() {
             if (!this.outsideClickListener) {
@@ -552,6 +557,12 @@ export default {
         },
         listId() {
             return UniqueComponentId() + '_list';
+        },
+        appendDisabled() {
+            return this.appendTo === 'self';
+        },
+        appendTarget() {
+            return this.appendDisabled ? null : this.appendTo;
         }
     },
     components: {

src/components/calendar/Calendar.vue

@@ -3,7 +3,7 @@
         <CalendarInputText ref="input" v-if="!inline" type="text" v-bind="$attrs" :value="inputFieldValue" @input="onInput" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" :readonly="!manualInput" inputmode="none" 
             :class="inputClass" :style="inputStyle" />
         <CalendarButton v-if="showIcon" :icon="icon" tabindex="-1" class="p-datepicker-trigger" :disabled="$attrs.disabled" @click="onButtonClick" type="button" :aria-label="inputFieldValue"/>
-        <Teleport :to="appendTo" :disabled="inline">
+        <Teleport :to="appendTarget" :disabled="appendDisabled">
             <transition name="p-connected-overlay" @enter="onOverlayEnter($event)" @after-enter="onOverlayEnterComplete" @after-leave="onOverlayAfterLeave" @leave="onOverlayLeave">
                 <div :ref="overlayRef" :class="panelStyleClass" v-if="inline ? true : overlayVisible" :role="inline ? null : 'dialog'" @click="onOverlayClick">
                     <template v-if="!timeOnly">
@@ -699,8 +699,13 @@ export default {
                 this.enableModality();
             }
             else if (this.overlay) {
-                this.overlay.style.minWidth = DomHandler.getOuterWidth(this.$el) + 'px';
+                if (this.appendDisabled) {
-                DomHandler.absolutePosition(this.overlay, this.$el);
+                    DomHandler.relativePosition(this.overlay, this.$el);
+                }
+                else {
+                    this.overlay.style.minWidth = DomHandler.getOuterWidth(this.$el) + 'px';
+                    DomHandler.absolutePosition(this.overlay, this.$el);
+                }
             }
         },
         onButtonClick() {
@@ -2159,6 +2164,12 @@ export default {
         },
         monthNames() {
             return this.$primevue.config.locale.monthNames;
+        },
+        appendDisabled() {
+            return this.appendTo === 'self' || this.inline;
+        },
+        appendTarget() {
+            return this.appendDisabled ? null : this.appendTo;
         }
     },
     components: {

src/components/cascadeselect/CascadeSelect.vue

@@ -12,7 +12,7 @@
         <div class="p-cascadeselect-trigger" role="button" aria-haspopup="listbox" :aria-expanded="overlayVisible">
             <span class="p-cascadeselect-trigger-icon pi pi-chevron-down"></span>
         </div>
-        <Teleport :to="appendTo">
+        <Teleport :to="appendTarget" :disabled="appendDisabled">
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
                 <div :ref="overlayRef" :class="panelStyleClass" v-if="overlayVisible" @click="onOverlayClick">
                     <div class="p-cascadeselect-items-wrapper">
@@ -188,8 +188,13 @@ export default {
             ZIndexUtils.clear(el);
         },
         alignOverlay() {
-            DomHandler.absolutePosition(this.overlay, this.$el);
+            if (this.appendDisabled) {
-            this.overlay.style.minWidth = DomHandler.getOuterWidth(this.$el) + 'px';
+                DomHandler.relativePosition(this.overlay, this.$el);
+            }
+            else {
+                this.overlay.style.minWidth = DomHandler.getOuterWidth(this.$el) + 'px';
+                DomHandler.absolutePosition(this.overlay, this.$el);
+            }
         },
         bindOutsideClickListener() {
             if (!this.outsideClickListener) {
@@ -303,6 +308,12 @@ export default {
         },
         panelStyleClass() {
             return ['p-cascadeselect-panel p-component', this.panelClass];
+        },
+        appendDisabled() {
+            return this.appendTo === 'self';
+        },
+        appendTarget() {
+            return this.appendDisabled ? null : this.appendTo;
         }
     },
     components: {

src/components/colorpicker/ColorPicker.d.ts

@@ -9,6 +9,7 @@ interface ColorPickerProps {
     baseZIndex?: number;
     ariaLabelledBy?: string;
     panelClass?: string;
+    appendTo?: string;
 }
 
 declare class ColorPicker {

src/components/colorpicker/ColorPicker.vue

@@ -2,7 +2,7 @@
     <div ref="container" :class="containerClass">
         <input ref="input" type="text" :class="inputClass" readonly="readonly" :tabindex="tabindex" :disabled="disabled"
             @click="onInputClick" @keydown="onInputKeydown" v-if="!inline" :aria-labelledby="ariaLabelledBy"/>
-        <Teleport to="body" :disabled="inline">
+        <Teleport :to="appendTarget" :disabled="appendDisabled">
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
                 <div :ref="pickerRef" :class="pickerClass" v-if="inline ? true : overlayVisible" @click="onOverlayClick">
                     <div class="p-colorpicker-content">
@@ -66,6 +66,10 @@ export default {
             type: String,
             default: null
         },
+        appendTo: {
+            type: String,
+            default: 'body'
+        },
         panelClass: null
     },
     data() {
@@ -362,7 +366,10 @@ export default {
             }
         },
         alignOverlay() {
-            DomHandler.absolutePosition(this.picker, this.$refs.input);
+            if (this.appendDisabled)
+                DomHandler.relativePosition(this.picker, this.$refs.input);
+            else
+                DomHandler.absolutePosition(this.picker, this.$refs.input);
         },
         onInputClick() {
             if (this.disabled) {
@@ -552,6 +559,12 @@ export default {
                 originalEvent: event,
                 target: this.$el
             });
+        },
+        appendDisabled() {
+            return this.appendTo === 'self' || this.inline;
+        },
+        appendTarget() {
+            return this.appendDisabled ? null : this.appendTo;
         }
     },
     computed: {

src/components/dropdown/Dropdown.vue

@@ -13,7 +13,7 @@
         <div class="p-dropdown-trigger" role="button" aria-haspopup="listbox" :aria-expanded="overlayVisible">
             <span class="p-dropdown-trigger-icon pi pi-chevron-down"></span>
         </div>
-        <Teleport :to="appendTo">
+        <Teleport :to="appendTarget" :disabled="appendDisabled">
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
                 <div :ref="overlayRef" :class="panelStyleClass" v-if="overlayVisible" @click="onOverlayClick">
                     <slot name="header" :value="modelValue" :options="visibleOptions"></slot>
@@ -418,8 +418,13 @@ export default {
             ZIndexUtils.clear(el);
         },
         alignOverlay() {
-            this.overlay.style.minWidth = DomHandler.getOuterWidth(this.$el) + 'px';
+            if (this.appendDisabled) {
-            DomHandler.absolutePosition(this.overlay, this.$el);
+                DomHandler.relativePosition(this.overlay, this.$el);
+            }
+            else {
+                this.overlay.style.minWidth = DomHandler.getOuterWidth(this.$el) + 'px';
+                DomHandler.absolutePosition(this.overlay, this.$el);
+            }  
         },
         updateModel(event, value) {
             this.$emit('update:modelValue', value);
@@ -650,6 +655,12 @@ export default {
         },
         emptyMessageText() {
             return this.emptyMessage || this.$primevue.config.locale.emptyMessage;
+        },
+        appendDisabled() {
+            return this.appendTo === 'self';
+        },
+        appendTarget() {
+            return this.appendDisabled ? null : this.appendTo;
         }
     },
     directives: {

src/components/multiselect/MultiSelect.vue

@@ -23,7 +23,7 @@
         <div class="p-multiselect-trigger">
             <span class="p-multiselect-trigger-icon pi pi-chevron-down"></span>
         </div>
-        <Teleport :to="appendTo">
+        <Teleport :to="appendTarget" :disabled="appendDisabled">
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
                 <div :ref="overlayRef" :class="panelStyleClass" v-if="overlayVisible" @click="onOverlayClick">
                     <slot name="header" :value="modelValue" :options="visibleOptions"></slot>
@@ -364,8 +364,13 @@ export default {
             ZIndexUtils.clear(el);
         },
         alignOverlay() {
-            this.overlay.style.minWidth = DomHandler.getOuterWidth(this.$el) + 'px';
+            if (this.appendDisabled) {
-            DomHandler.absolutePosition(this.overlay, this.$el);
+                DomHandler.relativePosition(this.overlay, this.$el);
+            }
+            else {
+                this.overlay.style.minWidth = DomHandler.getOuterWidth(this.$el) + 'px';
+                DomHandler.absolutePosition(this.overlay, this.$el);
+            }
         },
         bindOutsideClickListener() {
             if (!this.outsideClickListener) {
@@ -602,6 +607,12 @@ export default {
         },
         emptyMessageText() {
             return this.emptyMessage || this.$primevue.config.locale.emptyMessage;
+        },
+        appendDisabled() {
+            return this.appendTo === 'self';
+        },
+        appendTarget() {
+            return this.appendDisabled ? null : this.appendTo;
         }
     },
     directives: {

src/components/password/Password.vue

@@ -2,7 +2,7 @@
     <div :class="containerClass" :style="style">
         <PInputText ref="input" :class="inputFieldClass" :style="inputStyle" :type="inputType" :value="modelValue" @input="onInput" @focus="onFocus" @blur="onBlur" @keyup="onKeyUp" v-bind="$attrs" />
         <i v-if="toggleMask" :class="toggleIconClass" @click="onMaskToggle" />
-        <Teleport :to="appendTo">
+        <Teleport :to="appendTarget" :disabled="appendDisabled">
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
                 <div :ref="overlayRef" :class="panelStyleClass" v-if="overlayVisible" @click="onOverlayClick">
                     <slot name="header"></slot>
@@ -118,8 +118,13 @@ export default {
             ZIndexUtils.clear(el);
         },
         alignOverlay() {
-            this.overlay.style.minWidth = DomHandler.getOuterWidth(this.$refs.input.$el) + 'px';
+            if (this.appendDisabled) {
-            DomHandler.absolutePosition(this.overlay, this.$refs.input.$el);
+                DomHandler.relativePosition(this.overlay, this.$refs.input.$el);
+            }
+            else {
+                this.overlay.style.minWidth = DomHandler.getOuterWidth(this.$refs.input.$el) + 'px';
+                DomHandler.absolutePosition(this.overlay, this.$refs.input.$el);
+            }
         },
         testStrength(str) {
             let level = 0;
@@ -277,6 +282,12 @@ export default {
         },
         promptText() {
             return this.promptLabel || this.$primevue.config.locale.passwordPrompt;
+        },
+        appendDisabled() {
+            return this.appendTo === 'self';
+        },
+        appendTarget() {
+            return this.appendDisabled ? null : this.appendTo;
         }
     },
     components: {

src/components/treeselect/TreeSelect.vue

@@ -22,7 +22,7 @@
         <div class="p-treeselect-trigger">
             <span class="p-treeselect-trigger-icon pi pi-chevron-down"></span>
         </div>
-        <Teleport :to="appendTo">
+        <Teleport :to="appendTarget" :disabled="appendDisabled">
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
                 <div :ref="overlayRef" v-if="overlayVisible" @click="onOverlayClick" :class="panelStyleClass">
                     <slot name="header" :value="modelValue" :options="options"></slot>
@@ -227,8 +227,13 @@ export default {
             ZIndexUtils.clear(el);
         },
         alignOverlay() {
-            this.overlay.style.minWidth = DomHandler.getOuterWidth(this.$el) + 'px';
+            if (this.appendDisabled) {
-            DomHandler.absolutePosition(this.overlay, this.$el);
+                DomHandler.relativePosition(this.overlay, this.$el);
+            }
+            else {
+                this.overlay.style.minWidth = DomHandler.getOuterWidth(this.$el) + 'px';
+                DomHandler.absolutePosition(this.overlay, this.$el);
+            }
         },
         bindOutsideClickListener() {
             if (!this.outsideClickListener) {
@@ -393,6 +398,12 @@ export default {
         },
         emptyOptions() {
             return !this.options || this.options.length === 0;
+        },
+        appendDisabled() {
+            return this.appendTo === 'self';
+        },
+        appendTarget() {
+            return this.appendDisabled ? null : this.appendTo;
         }
     },
     components: {

src/views/autocomplete/AutoCompleteDoc.vue

@@ -209,7 +209,8 @@ export default {
                         <td>appendTo</td>
                         <td>string</td>
                         <td>body</td>
-                        <td>A valid query selector or an HTMLElement to specify where the overlay gets attached.</td>
+                        <td>A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are "body" for document body
+                        and "self" for the element itself.</td>
                     </tr>
                     <tr>
                         <td>inputStyle</td>

src/views/calendar/CalendarDoc.vue

@@ -393,7 +393,8 @@ export default {
                         <td>appendTo</td>
                         <td>string</td>
                         <td>body</td>
-                        <td>A valid query selector or an HTMLElement to specify where the overlay gets attached.</td>
+                        <td>A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are "body" for document body
+                        and "self" for the element itself.</td>
                     </tr>
                     <tr>
                         <td>inputStyle</td>

src/views/cascadeselect/CascadeSelectDoc.vue

@@ -211,7 +211,8 @@ data() {
                         <td>appendTo</td>
                         <td>string</td>
                         <td>body</td>
-                        <td>A valid query selector or an HTMLElement to specify where the overlay gets attached.</td>
+                        <td>A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are "body" for document body
+                        and "self" for the element itself.</td>
                     </tr>
                     <tr>
                         <td>panelClass</td>

src/views/colorpicker/ColorPickerDoc.vue

@@ -104,6 +104,13 @@ export default {
                         <td>null</td>
                         <td>Style class of the overlay panel.</td>
                     </tr>
+                    <tr>
+                        <td>appendTo</td>
+                        <td>string</td>
+                        <td>body</td>
+                        <td>A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are "body" for document body
+                        and "self" for the element itself.</td>
+                    </tr>
                 </tbody>
             </table>
         </div>

src/views/dropdown/DropdownDoc.vue

@@ -255,7 +255,8 @@ export default {
                         <td>appendTo</td>
                         <td>string</td>
                         <td>body</td>
-                        <td>A valid query selector or an HTMLElement to specify where the overlay gets attached.</td>
+                        <td>A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are "body" for document body
+                        and "self" for the element itself.</td>
                     </tr>
                     <tr>
                         <td>emptyFilterMessage</td>

src/views/multiselect/MultiSelectDoc.vue

@@ -251,7 +251,8 @@ export default {
                         <td>appendTo</td>
                         <td>string</td>
                         <td>body</td>
-                        <td>A valid query selector or an HTMLElement to specify where the overlay gets attached.</td>
+                        <td>A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are "body" for document body
+                        and "self" for the element itself.</td>
                     </tr>
                     <tr>
                         <td>emptyFilterMessage</td>

src/views/password/PasswordDoc.vue

@@ -127,7 +127,8 @@ import Password from 'primevue/password';
                         <td>appendTo</td>
                         <td>string</td>
                         <td>body</td>
-                        <td>A valid query selector or an HTMLElement to specify where the overlay gets attached.</td>
+                        <td>A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are "body" for document body
+                        and "self" for the element itself.</td>
                     </tr>
                     <tr>
                         <td>inputStyle</td>

src/views/treeselect/TreeSelectDoc.vue

@@ -308,7 +308,8 @@ data() {
                         <td>appendTo</td>
                         <td>string</td>
                         <td>body</td>
-                        <td>A valid query selector or an HTMLElement to specify where the overlay gets attached.</td>
+                        <td>A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are "body" for document body
+                        and "self" for the element itself.</td>
                     </tr>
                     <tr>
                         <td>emptyMessage</td>