[Bug]: Tabs and Resizable components do not work when I set e.preventDefault() in the pointerdown function

[pinky-pig]

Environment

Developement/Production OS: Apple M1 Pro Sonoma 14.2.1
Node version: 21.6.2
Package manager: [email protected]
Radix Vue version: 1.0.0
Vue version: latest
CSS framework: tailwindcss@latest
Client OS: MacOS
Browser: Chrome 90.0.4430.212

Link to minimal reproduction

https://stackblitz.com/edit/9wnv28-rfdbwj?file=src%2FApp.vue

Steps to reproduce

MouseLeftDemo.mp4

Describe the bug

When I set window.addEventListener('pointerdown', function (e){e.preventDefault() }, false) anywhere on the page, clicking on Tabs or Resizable components doesn't respond.

In Radix-Vue TabsTrigger Source Code, I found the use of @mousedown.left. Through a demo, I discovered that setting it up like that indeed doesn't trigger mousedown.left in Vue. As a result, both components don't respond to clicks.

Expected behavior

No response

Context & Screenshots (if applicable)

No response

[zernonia]

@pinky-pig this is by design where we can control the event by prevent the default. Any reason why you would want to prevent pointerdown event?

[pinky-pig]

@zernonia hey 👋

The reason was to develop a drag-and-drop feature compatible with both mobile and web platforms by using pointerEvent instead of mouse and touch in addEventListener.
however, dragging images might trigger the browser's default events, so event.preventDefault() was added. Then, it was discovered that the component events of shadcn-vue became ineffective.

The code was added elsewhere, yet it still caused the shadcn-vue ui component to ineffective. So, it took me a long time to pinpoint the reason.🤣

window.addEventListener('pointerdown', (e) => {
    e.preventDefault();
  }, false)

[zernonia]

why not in your drag-and-drop feature, only add the listener with e.preventDefault() when you startDragging?