dragging-issue carousel-item with dropdown in Firefox

Question

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!

Answer 1

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