primefaces / primevue

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

Tooltip: missing context properties for arrow passthrough #6095

Open jhillacre opened 4 months ago

jhillacre commented 4 months ago

Describe the bug

When using the v-tooltip directive without modifiers, the context passed to a passthrough function does not accurately reflect the true render direction of the tooltip, making it difficult to determine the correct orientation for the tooltip arrow. Additionally, when using the directive with a modifier (e.g., v-tooltip.top), and when forced to render in a different direction due to layout constraints, the context object incorrectly reflects the modifier rather than the actual render direction. This issue can be replicated in a StackBlitz hosted testcase where it's necessary to pop out the preview and adjust the screen size or zoom level to force tooltips to render opposite to their specified direction. For example, the tooltip configured to display at the top may instead render at the bottom.

The following screenshot shows a tooltip forced to render at the bottom despite being set to render at the top:

image

A console log generated from the following code snippet in main.js indicates that the passed context object does not reflect the change in render direction:

...
const CustomizedLara = usePassThrough(
    Lara,
    {
        directives: {
            ...Lara.directives,
            tooltip: {
                ...Lara.directives.tooltip,
                arrow: (...args) => {
                    const defaultArrow = Lara.directives.tooltip.arrow(...args);
                    // context will only reflect directive modifiers, not the actual context (the true direction)
                    console.log('arrow pt', Object.keys(args[0].context), Object.values(args[0].context));
                    return defaultArrow;
                }
            }
        }
    },
    {
        mergeSections: true,
        mergeProps: false,
    }
);

app.use(PrimeVue, {unstyled: true, ripple: true, pt: CustomizedLara});
...

Reproducer

https://stackblitz.com/~/github.com/jhillacre/primevue-3-vite-issue-template-tvvr1d

PrimeVue version

3.53.0

Vue version

3.x

Language

ALL

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

  1. Open this StackBlitz link: https://stackblitz.com/~/github.com/jhillacre/primevue-3-vite-issue-template-tvvr1d
  2. Pop out the preview.
  3. Open a developer tools window to observe the console.
  4. Adjust the window size and browser zoom to force tooltips to render not in their default location.
  5. Mouse over a tooltip that is rendering in an unintended location.
  6. Note that the logged context object only contains keys and values related to the modifiers, without any details reflecting the true render direction.

Expected behavior

The context object (context.left, context.right, context.top, and context.bottom) should accurately reflect the true render direction of the tooltip to enable correct CSS class application for tooltip arrows, rather than merely indicating directive modifiers.

jhillacre commented 2 months ago

now that I've updated to v4 myself, here is an updated v4 test case for this issue:

image

https://stackblitz.com/~/github.com/jhillacre/primevue-4-vite-issue-template-mduixc