New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Bug]: AutoScroll position jumps when clicked and dragged #764
Comments
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. |
@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, |
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 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! |
@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 Unfortunately, until then, you'll have to stick with the hacky solution you mentioned. Best, |
Oh yeah, something like |
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 👍🏻. |
Which variants of Embla Carousel are you using?
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.
embla.2.mp4
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
The text was updated successfully, but these errors were encountered: