3

i have an issue within my Angular7 application using the NguCarousel (uses HammerJS).

The carousel works as intended for displaying complex elements, until I add a html-select element in the carousel items.

Problem: When clicking the select the whole carousel becomes draggable in Firefox.

This can be seen when editing this demo a bit. In simple.component.html replace in row 3 {{item}} with <select></select>

Already tried the following things:

  • change framework: I have seen the same behaviour in swiper-framework (therefore probably not really framework related)

  • stop the event propagation with <select (click)="$event.stopPropagation()"> but that didn't help.

  • css touch-action: none one select

What else can i try?

Best regards

Terry

Edit: Still having this issue. A hint/idea would be splendid!

Terry Storm
  • 497
  • 3
  • 14
  • 1
    interesssting...looks like the carousel is interpreting it as a drag event. Possible workaround use a custom select component: https://netbasal.com/create-a-custom-select-component-in-angular-complete-with-virtual-scrolling-c29e24f72006 and replace it with the – Ahmed Hasn. Jul 12 '19 at 12:19
  • 2
    the thing is, i kinda need it as select element since it should be rendered by the os (e.g. mobile phone select overlay). otherwise i would have used bootstrap dropdown by now. If nothing works i will switch to a non-select way, but would prefer if i can adjust something to make it work with the standard select. – Terry Storm Jul 15 '19 at 07:15

1 Answers1

3

HammerJS uses pointerdown event to catch the start of dragging process.

So, that's probable what you wanted to stop from being propagated.

<select (pointerdown)="$event.stopPropagation()">

Forked Stackblitz

yurzui
  • 205,937
  • 32
  • 433
  • 399