Buggy carousel scrolling in Firefox

Question

I am using 'react-multi-carousel' with linked items. It works pretty good in Chrome and Opera? and on mobile devices. But in Firefox scrolling meets bugs. I guess this is links added in items cause bugs as with plain image items carousel works good in all browsers. This is the example my code looks like:

const Simple = () => {
  const [isMoving, stopIsMoving] = React.useState(false);
  return (
    <Carousel
      infinite
      ssr
      partialVisibile
      itemClass="image-item"
      responsive={responsive}
      beforeChange={() => stopIsMoving(true)}
      afterChange={() => stopIsMoving(false)}
    >
      {images.slice(0, 5).map(image => {
        return (
          <div isMoving={isMoving}>
            <Link>
              <a
                onClick={e => {
                  if (isMoving) {
                    e.preventDefault();
                  }
                }}
                href="google.com"
              >
                <Image
                  draggable={false}
                  style={{ width: "100%", height: "100%" }}
                  src={image}
                />
              </a>
            </Link>
          </div>
        );
      })}
    </Carousel>
  );
};

Codesandbox is - https://codesandbox.io/s/react-multi-carousel-playground-7c2kg?file=/components/Simple.js:2109-3012

Answer 1

Solved by adding the following to the image card:

onMouseDown={(event) => {
  if (event.preventDefault) {
    event.preventDefault();
}