Skip to content
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]: Click events prevented after scrolling using embla-carousel-wheel-gestures plugin #1149

Open
4 of 15 tasks
kmck opened this issue Mar 11, 2025 · 0 comments
Open
4 of 15 tasks
Assignees
Labels
bug Something isn't working

Comments

@kmck
Copy link

kmck commented Mar 11, 2025

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

  • 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

  • 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
@kmck kmck added the bug Something isn't working label Mar 11, 2025
@kmck kmck changed the title [Bug]: [Bug]: Click events prevented after scrolling using embla-carousel-wheel-gestures plugin Mar 12, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants