touchEnabled={false} preventing container scrolling via touch on mobile

[thepuzzlemaster]

Not sure if this is a bug, or if I'm perhaps missing an option for this.

I've got a row of carousels in my project that are wider than my screen. So the whole row can scroll to bring more carousels into view. Because of that, I'd like to disable the built-in touch on the Carousel, so dragging scrolls the container.

I've got touchEnabled set to false, but the carousel is still hijacking the touchEvent and calling preventDefault() (at least it would seem that's what's happening).

I've created a repro here: https://codesandbox.io/s/quirky-faraday-dg4m4p?file=/src/Carousel.tsx
If you open it in chrome mobile mode with simulated touch, dragging the images no-ops. Dragging horizontally between the carousels or on the next/back buttons scrolls the container.

Is there some additional option I need to enable this behavior? It seems like if touchEnabled is set to false, it should just let the touchEvent propagate as normal.

[thepuzzlemaster]

I found the culprit!

It is the following css property set on the slider!
touch-action: pan y pinch zoom

Would it be more appropriate for me to override this on my end, or add some sort of conditional override in the library as a PR?

I updated the codesandbox link above to include a fix on the consumer-side. Happy to think about a PR for this if the maintainers feel like it'd be appropriate.

[Conor-Hinchee]

Thank you for driving this as a discussion first and I am glad you have found the culprit. This is a bug we need to address and I have opened an issue to track this bug #442. If you have the capacity to help out it would be greatly appreciated. Let me know and I can assign the issue to you.

[thepuzzlemaster]

Sure thing. I think I should be able to help out on the bug. You can assign it to me. Thanks.