Dialog: [V4] When it non-fixed, it will cause the appendTo target shrink or joggled.

[wangziling]

Describe the bug

When the Dialog component want to be appended with the style position: absolute,
triggering it with the right or bottomRight or topRight state.

It will cause the appended target joggle or shrink.

I had used Dialog as a Drawer to let it under an position: relative element, and appeared as expanded from the right side.

Reproducer

https://stackblitz.com/edit/eud9xv-fgipqu

PrimeVue version

4.0.3

Vue version

4.x

Language

TypeScript

Build / Runtime

Nuxt

Browser(s)

Chrome 127.0.6533.89

Steps to reproduce the behavior

Please visit: https://stackblitz.com/edit/eud9xv-fgipqu

Then click "Right" or "TopRight" or "BottomRight".

I only add a "pt" property on the <Dialog /> component.

pt:mask:style="position: absolute;"

Expected behavior

Without the joggling.

[tugcekucukoglu]

The issue is not clear on our side. In the core, the mask already has position:fixed style. There is also appendTo prop available for Dialog. In which case you need to give absolute to mask.

[wangziling]

The issue is not clear on our side. In the core, the mask already has position:fixed style. There is also appendTo prop available for Dialog. In which case you need to give absolute to mask.

Hi~~~

Sorry for my unclear statements~

I had already used the appendTo property and add the style position: absolute; on the dialog mask.

E.g.:

<Dialog appendTo=".drawer-anchor" position="right" pt:mask:style="position: absolute;" />

<div class="drawer-anchor" style="position: relative;">The drawer anchor</div>

I want to achieve this effect: https://www.naiveui.com/en-US/os-theme/components/drawer#target.vue

But after I did the efforts above,

The demo:
https://stackblitz.com/edit/g3wkhk?file=src%2FApp.vue

After click the Show btn, you will see that:

Before the Dialog showing, the content of the <Dialog>'s parent of the positioning will be squeezed to the lefside at the beginning, and then after the Dialog being shown, the parent of the positioning will be recovered.

Finally I found that seems due to invoking the focus() event ahead of the time on the transition component's @enter lifecycle hook.

I had raised up a PR to fix this issue: #6161 😉