Unnecessary scroll under certain conditions

[olushchik]

Hi! I ran into a nasty bug with unnecessary scroll under certain conditions:

• loop: true
• draggable: false
• slidesToScroll: more than 1 (for example 4)
• slides count: more than slidesToScroll but not completely divisible by slidesToScroll (for example 5)

In this case after initial load when we scroll to next and try to click link on the first slide we see unnecessary scroll.

Here's a demonstration of what I'm talking about: https://codesandbox.io/s/embla-carousel-containscroll-mec6x

As I figured out it is because click on the link fires focus event and Embla considers that this is not the current slide and does scroll.

[davidjerleke]

Hi Oleg (@olushchik),

Nice catch, and thank you for reporting this! I appreciate the clear CodeSandbox demonstration ⭐️.

As you mention, Embla acts on the focus event and wants to scroll to the snap index containing the focused element (in this case index 0). This behaviour is desired when a user navigates with the tab key for accessibility reasons. However, it's not desired when clicking with a pointer.

Right now I'm working on the scrollBy() feature and it might take some time for me to investigate this further in order to release a patch. In the meantime, feel free to submit a pull request if you want.

Best,
David

[olushchik]

Hi, David! Thanks for the response!

This behaviour is desired when a user navigates with the tab key for accessibility reasons.

Oh, now I understand for what reasons this was done 😃 But I'm not sure that I understand how to fix it properly 😢

[davidjerleke]

Hello Oleg (@olushchik),

No worries 🙂. This issue will have to wait then. I appreciate you taking time to report this!

Kindly,
David

[davidjerleke]

Hello Oleg (@olushchik),

The following commit includes a fix for this bug. Embla Carousel Version 3 is just around the corner so the bug fix will be released with version 3.

Thanks for taking time to create this issue 👍!

Best,
David

This bug has been fixed and will be released with version 3.

[olushchik]

Thanks a lot, you are the best!

[davidjerleke]

Hello @olushchik,

This bug has been fixed and is ready for test if you grab the latest version. Note that it's a major version release so please read the instructions here.

I would very much appreciate if you could confirm if this is working as expected now and the bug has been solved.

[davidjerleke]

Have you had the chance to test this @olushchik? Thanks in advance.

[olushchik]

Unfortunately, no. Just tested in sandbox, works fine.

[davidjerleke]

@olushchik so this issue is resolved then 🙂?

[olushchik]

I reread my message and realized that it was not clear)) I meant that I did not check this in my real project, but only in the sandbox. And looks like the issue is resolved 👍

[davidjerleke]

Awesome, thank you for your feedback. I'm closing this issue and thanks for reporting this 👍.