Multi-item carousel no passive listeners lighthouse error

Hi @AnnaK, I'm just dealing with this problem and I can't reproduce it. After running the Google Lighthouse test, this error is not shown to me. Can you make sure our component is causing this problem? Please check if the error occurs for you when our component is the only element on the page.

Hi Grzegorg,

thank you for helping me.

I tried taking away the carousel from one page, and the errors disappeared, and when I put it back, they came again. I can also can see these errors in the Chrome Console in the verbose tab:

Can you see them there?

Hello again, sorry, have not been allowed to look into this sooner. At the moment my time is limited, but had a quick look, and found the following. - there are four errors that appear in the console (as in the image I posted above). - if I remove two hostlisteners from my code, two of the errors disappear. Here is some of my code:

  @HostListener('window:resize')
  onWindowResize() {
    this.setCarouselSettings();
  }

  @HostListener('swipeleft', ['$event']) public swipePrev(event: any) {
    this.el.previousSlide();
  }

  @HostListener('swiperight', ['$event']) public swipeNext(event: any) {
    this.el.nextSlide();
  }

  nextSlide() {
    this.el.nextSlide();
  }

  previousSlide() {
    this.el.previousSlide();
  }

  setCarouselSettings() {

    if (window.innerWidth <= this.CAROUSEL_BREAKPOINT) {
      this.carouselDisplayMode = 'single';
      this.showCarouselButtons = true;
    } else {
      this.carouselDisplayMode = 'multiple';
      if (this.cards.length > this.carouselChunkSize) {
        this.showCarouselButtons = true;
      } else {
        this.showCarouselButtons = false;
      }
    }
  }

If I remove the swipeleft and swiperight, two of the errors are not shown anymore.

If I remove everything regarding Hammer in the app file, the two other errors disappear:

//import { HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';

//@Injectable()
//export class MyHammerConfig extends HammerGestureConfig {
//  overrides = <any>{
//    'pan': { direction: Hammer.DIRECTION_All },
//    'swipe': { direction: Hammer.DIRECTION_VERTICAL },
//  };

//  buildHammer(element: HTMLElement) {
//    const mc = new Hammer(element, {
//      touchAction: 'auto',
//      inputClass: Hammer.SUPPORT_POINTER_EVENTS ? Hammer.PointerEventInput : Hammer.TouchInput,
//      recognizers: [
//        [Hammer.Swipe, {
//          direction: Hammer.DIRECTION_HORIZONTAL
//        }]
//      ]
//    });
//    return mc;
//  }
//}

....

//providers: [
  //  {
  //    provide: HAMMER_GESTURE_CONFIG,
  //    useClass: MyHammerConfig
  //  }
  //],

Could you advice how you have managed to get this working with swipe events?