Vue 3 <script setup> syntax may cause the v-tooltip to break the whole Primevue's ZIndexUtils

[nndnha]

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

[x] bug report => Search github for a similar issue or PR before submitting
[ ] 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

CodeSandbox Case (Bug Reports)
https://stackblitz.com/edit/github-hq9r6j?file=app.vue

What is the motivation / use case for changing the behavior?
Components with <script setup> syntax will make $primevue value undefined so the assigned value of this line of code will be undefined too, in that case the Primevue's ZIndexUtils system for Dialog, Overlay, Tooltip... will not work properly.

primevue/src/components/tooltip/Tooltip.js

Line 304 in 7aab982

target.$_ptooltipZIndex = options.instance.$primevue && options.instance.$primevue.config && options.instance.$primevue.config.zIndex.tooltip;

[rubjo]

@nndnha Thanks for discovering the cause of this, I too started wondering why some elements in my app seem to have the wrong z-index after a while.

Did you find any temporary workarounds while waiting for a fix?

[nndnha]

@nndnha Thanks for discovering the cause of this, I too started wondering why some elements in my app seem to have the wrong z-index after a while.

Did you find any temporary workarounds while waiting for a fix?

I changed the tooltip directive setup code from:

import Tooltip from 'primevue/tooltip';

vueApp.directive('tooltip', Tooltip);

to:

import Tooltip from 'primevue/tooltip';
import { DomHandler } from "primevue/utils";

function getTarget(el) {
  return DomHandler.hasClass(el, "p-inputwrapper")
    ? DomHandler.findSingle(el, "input")
    : el;
}

vueApp.directive("tooltip", {
  mounted(el) {
    const target = getTarget(el);
    target.$_ptooltipZIndex ??=
      vueApp.config.globalProperties.$primevue.config.zIndex.tooltip;
  },
  ...Tooltip,
});

[mertsincan]

Hi,

I researched this issue and found a PR related to it in Vue core. It looks like it broke access to globalProperties variables and vnode's instances within those custom directives.
vuejs/core@f44087e

For now, you can use;

<script setup>
import { usePrimeVue } from "primevue/config";

const $primevue = usePrimeVue();
defineExpose({
     $primevue
})
</script>

Best Regards,

[LouisVA]

Hi,

I researched this issue and found a PR related to it in Vue core. It looks like it broke access to globalProperties variables and vnode's instances within those custom directives. vuejs/core@f44087e

For now, you can use;

<script setup>
import { usePrimeVue } from "primevue/config";

const $primevue = usePrimeVue();
defineExpose({
     $primevue
})
</script>

Best Regards,

Can this be further explained?

I have tried to add this to components to fix my z-index not working. However this does not do anything. I must be using this wrong. Should this be added to every component? To App.vue too? Or just the component where we have the issue.

I have also tried changing the component back to <script> instead of <script setup> but that didn't do much either. I would need to do it to every component I guess?