Carousel on mobile blocking scroll events

[TakCastel]

I'm submitting a ...

[X] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primevue/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=110

Current behavior
Using the Carousel component on mobile.

Expected behavior
User can scroll down.

Minimal reproduction of the problem with instructions

Go to the carousel documentation :
https://www.primefaces.org/primevue/showcase-v2/#/carousel

Set your browser on mobile screen.

Try to scroll down the page.

What is the motivation / use case for changing the behavior?
The carousel is blocking the scroll event on mobile devices.

Please tell us about your environment:
Any OS.

• Vue version: 2.X

• PrimeVue version: 2.7

• Browser: Any broswer

Thank you.

[mertsincan]

Fixed in #1822

[arturogf93]

No working on:

Vue version: 3.X

PrimeVue version: 3.21

Browser: Any broswer

[FrankDeWitt]

The bug still happening. Isn't fixes. In the documentation can see and try.

[pushparajbhatta]

Still facing the bug. The scroll event on the carousel is still getting blocked on mobile devices.

[amrit5joshi]

I am also facing this issue on the latest version, has anyone got any work around or patches?

[FrankDeWitt]

I am also facing this issue on the latest version, has anyone got any work around or patches?

Yes, I just create a new one that import the original, and extend his methods.

const CustomCarousel = { extends: Carousel, props: { numVisible: Number, numScroll: Number, responsiveOptions: Array, }, methods: { onTouchMove() { return }, }, }

[amrit5joshi]

I am also facing this issue on the latest version, has anyone got any work around or patches?

Yes, I just create a new one that import the original, and extend his methods.

const CustomCarousel = { extends: Carousel, props: { numVisible: Number, numScroll: Number, responsiveOptions: Array, }, methods: { onTouchMove() { return }, }, }

Thank you, It solved my issue :)

[cyhnkckali]

En son sürümde de bu sorunla karşılaşıyorum, etrafta herhangi bir çalışma veya düzeltme eki olan var mı?

Evet, orijinali içe aktaran ve yöntemlerini genişleten yeni bir tane oluşturuyorum.
const CustomCarousel = { extends: Carousel, props: { numVisible: Number, numScroll: Number, responsiveOptions: Array, }, methods: { onTouchMove() { return }, }, }

Teşekkür ederim sorunumu çözdü :)

I'm having the same problem with my vue project. I don't fully understand your solution. Can you help me?

[FrankDeWitt]

En son sürümde de bu sorunla karşılaşıyorum, etrafta herhangi bir çalışma veya düzeltme eki olan var mı?

Evet, orijinali içe aktaran ve yöntemlerini genişleten yeni bir tane oluşturuyorum.
const CustomCarousel = { extends: Carousel, props: { numVisible: Number, numScroll: Number, responsiveOptions: Array, }, methods: { onTouchMove() { return }, }, }

Teşekkür ederim sorunumu çözdü :)

I'm having the same problem with my vue project. I don't fully understand your solution. Can you help me?

Is just a new const, that extend the original Carousel from Primevue, and replace onTouchMove for empty code, to prevent the issue in the core of PrimeVue

[cyhnkckali]

En son sürümde de bu sorunla karşılaşıyorum, herhangi bir deneme veya düzeltme eki olan var mı?

Evet, orijinali içe aktaran ve yöntemleri genişleten yeni bir tane oluşturuyorum.
const CustomCarousel = { extends: Carousel, props: { numVisible: Number, numScroll: Number, responsiveOptions: Array, }, methods: { onTouchMove() { return }, }, }

teşekkür ederim çözümü çözdüm :)

Vue projemde de aynı sorunu yaşıyorum. Çözümünüzü tam olarak anlamadım. Bana yardım eder misiniz?

PrimeVue'nun çekirdeğindeki sorunu önlemek için Primevue'daki orijinal Carousel'i genişleten ve onTouchMove'u boş kodla değiştiren yeni bir yapıdır.

Bana bir örnek verebilir misiniz? Çünkü ben yeniyim.

[FrankDeWitt]

const CustomCarousel = { extends: Carousel, props: { numVisible: Number, numScroll: Number, responsiveOptions: Array, }, methods: { onTouchMove() { return }, }, }

Please, use English, is hard to understand what you mean without a translator.

const CustomCarousel = { extends: Carousel, props: { numVisible: Number, numScroll: Number, responsiveOptions: Array, }, methods: { onTouchMove() { return }, }, }

In this example, I create CustomCarousel that includes extends: Carousel, this means that I want to use the Carousel component from PrimeVue, and extend inside my new object CustomCarousel

Now I have a clone of Carousel inside my CustomCarousel.

The next step is to rewrite the method onTouchMove, which generates the issue that mentions in this thread. Just replace the action implemented for PrimeVue, with an empty action with the return.
That means that when you are using a onTouchMove, swipe with your phone over the Carousel, and do nothing.

Hope you understand, buddy

[lwpinion]

We're seeing this on our project as well and it's quite unfortunate because we are pretty heavily using the carousels. I am frustrated that there is no update from the developer regarding this. This issue needs to be reopened.
I hate to do this, but @mertsincan is there anything that can be done about this?

[NerijusD]

@mertsincan @tugcekucukoglu This is still a very present issue on latest primevue version.
Can we reopen this issue?

Mobile scroll is broken when trying to scroll from carousel component. It is not moving at all. We are using Nuxt module and our config contains: components: { prefix: 'Prime' ... } therefore we could not apply suggested fix as:

const CustomCarousel = { extends: Carousel, props: { numVisible: Number, numScroll: Number, responsiveOptions: Array, }, methods: { onTouchMove() { return }, }, }

Since we are using unstyled mode and using preset, our carousel preset looks like this (unimportant stuff ommited):

    carousel: {
       root: 'carousel',
       ...
       itemsContainer: 'carousel__itemsContainer carousel__mobile-scroll-fix-selector-class',
      ...
   },

and then on App.vue or on main entry page we have this:

 const onTouchMoveFix = (event: Event) => { event.stopPropagation() }
 let carouselElements: HTMLCollectionOf<Element>
 onMounted(() => {
   carouselElements = document.getElementsByClassName('carousel__mobile-scroll-fix-selector-class')
   for (const elemment of carouselElements) {
     elemment.addEventListener('touchmove', onTouchMoveFix)
   }
 })
 onUnmounted(() => {
   for (const elemment of carouselElements) {
     elemment.addEventListener('touchmove', onTouchMoveFix)
   }
 })

This might help somebody who can't extend Carousel.