Primeng: Issue in Carousel component. Click events or href does not work on touch on mobile devices

[sukhminderx]

I'm submitting a ... (check one with "x")

[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/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)
Please demonstrate your case at stackblitz by using the issue template below. Issues without a test case have much less possibility to be reviewd in detail and assisted.

https://stackblitz.com/github/primefaces/primeng-issue-template

Current behavior

I added a simple carousel component. In the content of the carousel, I added anchor tag with href that navigates to other website. In desktop, the click events work and the navigation is successful. But in mobile, the touch events work for slide process and the click for href is not executed.

Expected behavior

In mobile, if the content of the carousel contains the href, it should be navigate on the touch/click of the anchor /button.

Minimal reproduction of the problem with instructions

The app can be seen here:
https://llqiwwpyb.github.stackblitz.io/

What is the motivation / use case for changing the behavior?

There can be anchors or button in carousel content and mobile devices should execute the click events of the content.

Please tell us about your environment:

• Angular version: 8.X
  
  8.X

• PrimeNG version: 8.X
  
  8.X

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  
  all. I did on chrome

• Language: [all | TypeScript X.X | ES6/7 | ES5]
  TypeScript

• Node (for AoT issues): node --version =

[Eldrisch]

Hi,
My team also encountered this problem. The problem lies here, in carousel.js:410:

Carousel.prototype.changePageOnTouch = function (e, diff) {
        if (diff < 0) {
            this.navForward(e);
        }
        else {
            this.navBackward(e);
        }
    };

Easiest way is to comment out if statements to remove defect and make carousel work properly.
Removal of this function requires to remove/change logic in Carousel.prototype.onTouchEnd method.

Edit: Of course to hotfix this in your project you can just overwrite this function e.g. in ngAfterViewInit hook :)

[sukhminderx]

@Eldrisch , will this work if I override the changePageOnTouch in my code??

[Eldrisch]

@Eldrisch , will this work if I override the changePageOnTouch in my code??

Yeah, should work, you can do it via ViewChild for exact element or just override whole prototype for every Carousel element in ngOnInit or constructor

[sukhminderx]

worked.. thanks! Closing this.

[biscuitboy]

Hi @sukhminderx , @Eldrisch,

Can you please post an example for the fix provided? I am not sure how to "override" the changePageOnTouch() in my component.

P.S: I am new to Angular ecosystem. Thanks!

[tavadur]

Hello @biscuitboy,
try it this way:

import { ElementRef, NgZone } from '@angular/core';
import { Carousel } from 'primeng/carousel';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent extends Carousel {

  constructor(public el:ElementRef,
    public zone: NgZone) {
    super(el,zone);
    Carousel.prototype.changePageOnTouch = (e,diff) => {}
}

Hope this will help. :)

[MarcinListkowski]

@sukhminderx Could you please reopen? I know the issue is fixed for you, but it's still there for others to rediscover (IMO #8377 is a duplicate) and yet it somehow got into 9.0 changelog as fixed. While @tavadur's code is a great workaround, I believe there is more that can be done.