Consistent teleport targets for all components

[bisubus]

I'm submitting a ... (check one with "x")

[ ] bug report => Search github for a similar issue or PR before submitting
[x] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primevue/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=110

Current behavior

The following components don't have appendTo prop and are forced to use <Teleport to="body">:

datatable\ColumnFilter.vue confirmpopup\ConfirmPopup.vue galleria\Galleria.vue image\Image.vue sidebar\Sidebar.vue toast\Toast.vue

These components accept only appendTo string prop, although Vue teleport supports both strings and DOM elements:

autocomplete\AutoComplete.vue calendar\Calendar.vue cascadeselect\CascadeSelect.vue colorpicker\ColorPicker.vue contextmenu\ContextMenu.vue dialog\Dialog.vue dropdown\Dropdown.vue menu\Menu.vue multiselect\MultiSelect.vue overlaypanel\OverlayPanel.vue password\Password.vue tieredmenu\TieredMenu.vue treeselect\TreeSelect.vue

It's possible to provide

Expected behavior

All listed components support both strings and elements in appendTo :

<Sidebar v-if="teleportElementRef" :append-to="teleportElementRef">...
<Toast append-to="self">...

What is the motivation / use case for changing the behavior?

This allows to consistently use custom container instead of relying on body, which may be undesirable on pages we don't fully control, e.g. inside a widget. Providing elements for to prop and not relying on supposedly selectors is generally a good practice in Vue applications and could be enabled in Primevue components to get rid of prop type warnings.

• Vue version: 3.X

• PrimeVue version: 3.12.X

• Browser: [all]

[regstar]

Any ETA on this?

[jzalac00]

Is there any update on when this might be added?

[hamedbaatour]

this inconsistency in PrimeVue is a big issue, especially for projects using iframe or the shadow DOM. fixing this would solve a bunch of z-index headaches in complex UIs. hoping a fix can be implemented during the RC stage before reaching the V4 stable release.

any ETA @tugcekucukoglu @mertsincan

[3zzy]

+1 appendTo is essential for these components.

PrimeReact has it, wonder why not PrimeVue.