[Bug]: Click events prevented after scrolling using embla-carousel-wheel-gestures plugin

[kmck]

Which variants of Embla Carousel are you using?

• [x] 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

• Configure Embla carousel with
  • dragFree: true
  • embla-carousel-wheel-gestures plugin
  • watchDrag: (emblaApi, e) => (emblaApi.containerNode() === e.target): basically trying to disable click+drag but allow wheel gesture plugin's simulated mousemove events
• Configure carousel items to have buttons with onClick handlers inside
• Use scroll gestures/mouse wheel to scroll the carousel
• Try to click on a button inside a carousel item
• Observe that click handler doesn't fire until the second click

Expected Behavior

• Buttons should be clickable the first time

Additional Context

I investigated thinking this might be a plugin problem, but when looking at the source of embla-carousel, it seems like preventClick = true is set in the mousemove handler. I don't think there is a corresponding way for a plugin to unset it, which might make sense to do in mouseup.

My next thought is maybe to dispatch a simulated click event knowing that the first one will be ignored, but that feels pretty dirty. Maybe translating wheel events into mouse movement events in a plugin isn't the ideal approach for the plugin in the first place and it should be setting the position more directly?

What browsers are you seeing the problem on?

All browsers

Version

8.3.1

CodeSandbox

No response

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]

@kmck, thank you for submitting your bug report. Could you please provide a CodeSandbox link with the setup? Additionally, a screen recording showing the steps to reproduce the issue would be very helpful.

If this is something that needs to be fixed on the plugin side, please note that there's a separate repository for that here.

[kmck]

CodeSandbox: https://codesandbox.io/p/sandbox/dlhxlp

Reproduction steps are included there as well!

I worked around it by forking the plugin and adding logic to simulate a click event when it was necessary, so it could be fixed plugin-side ultimately, but the approach feels pretty hacky.

I'm not sure if the simulated mouse events thing is just the path of least resistance due to what's exposed in the Embla internal engine, but I would naively assume that it would be easier if it were possible to toggle the physics off and go into a "direct positioning mode" while scroll wheel events are happening, then re-enable the physics afterwards.

[davidjerleke]

CodeSandbox: https://codesandbox.io/p/sandbox/dlhxlp

@kmck, are you sure the CodeSandbox link is correct? It looks like the wheel gestures plugin isn't installed there.

Reproduction steps are included there as well!

I can't find them 😕?