UI Carousel activates links when drag-and-dropped
I am using a very simple Carousel (https://ui.nuxt.com/components/carousel) component which contains a series of images, each wrapped in a
NuxtLink. My problem is that when I drag the carousel the link is automatically fired when I release the mouse.
Is there a way to suppress this behaviour? (I've tried listening for dragstart and dragend events so that I can add/remove the pointer-events-none class, but nothing I try seems to work within the carousel.
When I inspect the events fired in Chrome Dev Tools then all I see are mouse movenents. I'm not really sure how to hook into what the Carousel is doing...
The problem is easily reproducible e.g. https://stackblitz.com/edit/nuxt-ui-jr7sva?file=components%2FMyCarousel.vue (if you drag it back and forward a couple of times you'll see it try to go to google.com)
It was also reported on Github https://github.com/nuxt/ui/issues/1420 but the question was closed without answers.
Thanks in advance for your helpStuart McGill
StackBlitz
Nuxt UI - Playground (forked) - StackBlitz
Playground of Nuxt UI, a UI library powered by Headless UI and Tailwind CSS for Nuxt.
0 Replies