Skip to content

[Bug]: Not able to drag AutoScroll carousels with <a> tags multiple times #1263

@mtm9ewy

Description

@mtm9ewy

Which variants of Embla Carousel are you using?

  • embla-carousel (Core)
  • embla-carousel-react
  • embla-carousel-vue
  • embla-carousel-svelte
  • embla-carousel-autoplay
  • embla-carousel-auto-scroll
  • embla-carousel-solid
  • embla-carousel-auto-height
  • embla-carousel-class-names
  • embla-carousel-fade
  • embla-carousel-docs (Documentation)
  • embla-carousel-docs (Generator)

Steps to reproduce

The bug occurs when the following options are enabled:

  const [emblaRef, emblaApi] = useEmblaCarousel(
    {
      loop: true,
      dragFree: true,
      axis: "x"
    },
    [
      Autoscroll({
        speed: 1,
        startDelay: 0,
        stopOnInteraction: false, // Scroll never stops
        stopOnMouseEnter: true,
      }),
    ]
  );

When attempting to drag multiple times on the carousel, the second drag doesn't work and instead it resumes the autoscroll, even though the mouse is still in the carousel.

Expected Behavior

Dragging should continue to work until the mouse leaves the carousel. Then the auto-scroll will resume.

Additional Context

Screen.Recording.2025-11-20.194439.mp4

What browsers are you seeing the problem on?

Firefox, Microsoft Edge

Version

v8.6.0

CodeSandbox

https://codesandbox.io/p/sandbox/embla-carousel-auto-scroll-react-forked-xxx396

Before submitting

  • I've made research efforts and searched the documentation
  • I've searched for existing issues
  • I agree to follow this project's Contributing Guidelines for bug reports

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions