Unexpected behavior of the ConfirmDialog component during dragging process

[Dmytro-Lukashenko]

Describe the bug

If the user adds a margin to the component (<ConfirmDialog class="mx-4"/>), the ConfirmDialog component will have unexpected behavior during the dragging process. When the user tries to drag the popup to the left, it moves to the right. The reason for this bug is inside the logic of the calculation coordinates of the popup during the dragging process. We can solve this problem by subtracting the margin-left from leftPos and margin-top from topPos when we calculate this.container.style.left and this.container.style.top.

This issue linked to the fixes for PrimeNg and PrimeReact

• Component: p-dialog bad drag behavior primeng#13493 - Prime Ng
• fix: #4759 bad behaviour of Dialog component primereact#4760 - Prime React

Reproducer

https://stackblitz.com/edit/kex6xr?file=src%2FApp.vue

PrimeVue version

3.30.2

Vue version

3.x

Language

ES6

Build / Runtime

Vite

Browser(s)

Chrome

Steps to reproduce the behavior

1.. Create a new Vue component and add the ConfirmDialog component to the template.
2. Add a button to the template to trigger the popup appearing.
2. Add class "mx-4" to the ConfirmDialog component.
3. Click the button to popup appears.
4. After the popup appears try to drag it to the left.
5. The popup moves to the right.

unexpected_behavior.webm

Expected behavior

If you drag the popup, it should move in the direction of dragging regardless of the margins of this popup.

expected_behavior.webm