search

xiel / embla-carousel-wheel-gestures

wheel interactions for Embla Carousel
https://embla-carousel-wheel-gestures.xiel.dev/react.html
MIT License
54 stars 8 forks source link

Support use in Shadow DOM #159

Closed careless-esper closed 2 years ago

careless-esper commented 2 years ago

Bug Description

This plugin does not function properly when using with an instance of Embla Carousel contained in a Shadow DOM.

CodeSandbox

https://codesandbox.io/s/sleepy-wing-e8or8g

Steps to reproduce

  1. Open https://codesandbox.io/s/sleepy-wing-e8or8g
  2. Use mouse wheel to scroll through top carousel—carousel scrolls as expected
  3. Attempt to use mouse wheel to scroll through bottom carousel—carousel does not scroll properly

Suggested Fix

  1. In the createRelativeMouseEvent function, when creating the MouseEvent, add composed: true to the dictionary parameter (See https://developer.mozilla.org/en-US/docs/Web/API/Event/composed).
xiel commented 2 years ago

Thanks for opening the issue, providing a repro and suggesting even a fix. 🤟

I'll try to get this fix in later today/tomorrow.

xiel commented 2 years ago

@careless-esper Thanks again, for the perfect issue & repro.

I even stole your repro and added it to the demos, hope that's OK 😬

The fix is now available in newly published v2.1.1