[Bug]: AutoScroll position jumps when clicked and dragged

[jasonk16]

Which variants of Embla Carousel are you using?

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

Steps to reproduce

I've recently updated the carousel to version 8.0.0. The carousel shifts its position when I click and drag the carousel, with autoscroll enabled. Based on my observation so far, it tends to happen if the mouse has entered the carousel, where it stops scrolling, and the user clicks and drags. It does not happen when my mouse quickly enters and drags the carousel.

https://github.com/davidjerleke/embla-carousel/assets/59631071/f3ca12f0-1ff4-40ef-812d-0cd34a46df44

Expected Behavior

Carousel should not shift its position when clicked and dragged.

Additional Context

I'm using Nextjs 14 with app router.

What browsers are you seeing the problem on?

Chrome

Version

8.0.0

CodeSandbox

https://codesandbox.io/p/sandbox/embla-carousel-auto-scroll-react-forked-lkvshs?file=%2Fsrc%2Fjs%2FEmblaCarousel.tsx

Before submitting

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

[davidjerleke]

Hi @jasonk16,

Thanks for your bug report. Have you seen the example in the docs? Can you reproduce it there? If no, please check how to work with the plugin there.

Best, David

[jasonk16]

Thanks for your quick reply @davidjerleke. I've reproduced the jumpyness based on the example here, I've just changed the individual items to suit my needs, which is an image container.

[davidjerleke]

@jasonk16 thanks! I'll investigate what's going on when possible.

This might be related to anchor tags being elements that can receive focus. If my assumption is correct, the carousel jumps to the slide that is active when the focus event is triggered from a click.

Best, David

[jasonk16]

Your assumption is correct. I've just tried removing the anchor tags from the cards and it does not jump anymore. Perhaps I could use onClick on divs as a workaround temporarily, but long term I guess its not a good html semantics if those cards are links.

I also tried nesting the anchor tag within the div but I guess the focus still triggers on click. Let me know if theres anything you'd need my help on. Thanks again!

[davidjerleke]

Perhaps I could use onClick on divs as a workaround temporarily, but long term I guess it's not a good html semantics if those cards are links.

@jasonk16 you're right about that. It's not good semantics so a solution for this is needed. I'm working on a new option called watchFocus which will enable you to either disable/enable the auto focus feature with a boolean. Alternatively, you will be able to pass your own callback to control when Embla should focus or not: Similar to watchDrag, watchResize and watchSlides.

Unfortunately, until then, you'll have to stick with the hacky solution you mentioned.

Best, David

[jasonk16]

Oh yeah, something like watchFocus would be beneficial. Thanks a lot for coming up with a fix. I'll just go with the hacky solution for now but happy to help if you'd need me to test anything.

[davidjerleke]

Thanks @jasonk16. It would definitely help if you wouldn’t mind testing as soon as I have a draft ready. I’ll let you know when I have something 👍🏻.

[4l3x91]

Hi, sorry for the bump but this is the only place I found regarding this exact bug.

I'm using embla-carousel-svelte and just stumbled across this very same bug and also found it's the anchor tag causing this issue. I thought I'd solve it by navigating with window.location and an on:click as mentioned above, but that unfortunately disables the internal linking in Svelte.

I was hoping somebody would have an idea on how to best handle this - preferably keeping the internal linking behavior of Svelte.

Thanks in advance, and thank you for an amazing library!

Alex

[davidjerleke]

@jasonk16 and @4l3x91 you can try upgrading to v8.2.0. If that doesn't solve the problem, you can now modify or opt-out of the auto focus behavior using the watchFocus option released v8.2.0 release.

[davidjerleke]

@jasonk16 and/or @4l3x91, let me know if you intend to test if the bug is solved as described here.

[sb-relaxt-at]

@davidjerleke We do no longer have this jumping issue after upgrading to the latest version. In our case it has not been necessary to modify watchFocus. Thanks a lot (for this nice library and your fix)!

[davidjerleke]

@sb-relaxt-at thanks a lot for testing and confirming that the fix is working 👍🏻.

[jasonk16]

@jasonk16 and/or @4l3x91, let me know if you intend to test if the bug is solved as described here.

Hey @davidjerleke, sorry for the late reply! Yep I do intend to test it but was caught up in another project. Will test it this week and let you know!

[jasonk16]

Hey @davidjerleke, sorry for the delay. I've upgraded to v8.2.1 and so far there is no more focus issues when I wrap my items in an anchor. Thank you so much for fixing it!

[davidjerleke]

@jasonk16 thanks for confirming. Enjoy 🎉.