search

primefaces / primevue

Next Generation Vue UI Component Library
https://primevue.org
MIT License
10.08k stars 1.2k forks source link

Consistent teleport targets for all components #2464

Open bisubus opened 2 years ago

bisubus commented 2 years ago

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.

regstar commented 1 year ago

Any ETA on this?

jzalac00 commented 6 months ago

Is there any update on when this might be added?

hamedbaatour commented 3 months ago

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