Carousel Link Click

[stevensturkop]

Browser: Chrome Version 121.0.6167.160 OS: Macos Sonoma 14.2.1

Summary

Hello,

I came across this discussion regarding my issue. I attempted to implement the suggested solution. Unfortunately, it does not work.

Issue:

Whenever I drag the carousel, despite having the handleDragStart function, the link is still clicked when I release the mouse. I've provided a simple reproduction of the issue. My objective is to enable clicking on the link only when explicitly clicking on it, rather than having it triggered at the end of a drag action.

While I've created a custom ScrollableContainer component to address this, it would be great to have this behavior integrated directly into the library itself.

Code

import React from 'react';
import AliceCarousel from 'react-alice-carousel';
import 'react-alice-carousel/lib/alice-carousel.css';

const handleDragStart = (e: React.DragEvent<HTMLAnchorElement>) => e.preventDefault();

const items = [
  <a href='https://google.com' key='1' onDragStart={handleDragStart}>
    <img src='https://placehold.co/600x400' alt='test' />
  </a>,
  <a href='https://google.com' key='2' onDragStart={handleDragStart}>
    <img src='https://placehold.co/600x400' alt='test' />
  </a>,
  <a href='https://google.com' key='3' onDragStart={handleDragStart}>
    <img src='https://placehold.co/600x400' alt='test' />
  </a>,
];

export const Gallery = () => {
  return <AliceCarousel mouseTracking items={items} />;
};

Reproduction environment:

https://codesandbox.io/p/sandbox/fragrant-violet-s5x2q9

How to repro:

Drag and release the mouse while having the pointer on the element, it opens the link.