Selection Bound Area is positioned away from the modal

[quankhuc]

Environments

• Framework name: Nuxt.JS
• Framework version: Nuxt 3
• Component name: vue3-selecto
• Component version: 1.8.2
• Testable Address(optional):

Description

Hi, I am trying to incorporate your package into a dialog (modal). For the dialog (modal), I used headless-ui dialog component to make this modal. When I attempted to put boxes into a selection area by using your package example code, the selection bound is no longer attached within the selection area. It instead deviates by the value of clientX of the MouseEvent. I attached a video that captures the issue.

https://user-images.githubusercontent.com/71282105/232992273-57fc0e30-2288-4215-bb2e-6bc525b94470.mov

As you can see in the video, when I tried to click on the top left of the white bordered selection area, the clientX is about 300px. The selection bound area (blue area)is off in the horizontal direction by about the same amount of pixels. The same behavior can be seen with vertical direction.

Here is the link to my dialog code:

https://github.com/quankhuc/nuxt-catoptric-project/blob/main/components/Dashboard/PanelModal.vue

I appreciate any guidances or future fixes on this issue.