Ionic-framework: ionic2: ion-item with (press) not scrollable

Created on 10 May 2016 · 16Comments · Source: ionic-team/ionic-framework

Short description of the problem:

a list of items with (press) to open actionsheet, but it does not scroll on touch (works with mousewheel)

What behavior are you expecting?

Steps to reproduce:

create a list
each item should have (press) defined
the following code will be added automatically by the (press) handler
because of this it cannot scroll

style="touch-action: none; -webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

Which Ionic Version? 2.x

Plunker that shows an example of your issue

http://plnkr.co/edit/RlQN1xdvIrmdUNp2XLSn?p=preview

you need the touch events to see the problem.

to have only the code:
http://run.plnkr.co/BpjNf4BrhbQdWNab/

in the plunker i also added my workaround (toggle at the beginning of the list forces touch-events back to it's default value)

Source

wodka

Most helpful comment

I was able to solve this problem by creating a custom directive for the press event, based on: http://stackoverflow.com/questions/43492833/ionic-2-setting-callback-for-long-press-event-directive.

import { Directive, ElementRef, OnInit, OnDestroy, Output, EventEmitter } from '@angular/core';
import { Gesture } from "ionic-angular/gestures/gesture";

@Directive({
    selector: '[long-press]'
})

export class PressDirective implements OnInit, OnDestroy {
    el: HTMLElement;
    pressGesture: Gesture;
    @Output('long-press') onPressRelease: EventEmitter<any> = new EventEmitter();

    constructor(el: ElementRef) {
        this.el = el.nativeElement;
    }

    ngOnInit() {
        this.pressGesture = new Gesture(this.el);
        this.pressGesture.listen();

        this.pressGesture.on('press', (event) => {
            this.onPressRelease.emit('released');
        });
    }

    ngOnDestroy() {
        this.pressGesture.destroy();
    }
}

And then use (long-press)="myfunction()"...

JanPeeters on 5 May 2017

👍3

All 16 comments

Hello! Thanks for opening an issue with us! Good catch, we are also able to reprodoce this issue and will be looking into it.

jgw96 on 11 May 2016

👍3

In this case, just using (click) is recommended. Hammer's press adds a few more handlers that makes things more difficult, where click should be working fine for this scenario.

adamdbradley on 2 Jun 2016

on (click) I open the page for the entry, and on (press) I'd like to show the the action sheet.

-> therefore switching to (click) won't solve the issue itself.

the main problem I can see so far is that the css prevents the touch action (by removing it scroll works again)

wodka on 2 Jun 2016

having exactly the same problem

JohnyGemityg on 4 Jun 2016

just face the same issue when adding a swipe or click event on the ion-item!

dadakoko on 25 Jul 2016

Hi, I also got the same problem on putting press in the ion-item. Is there any solution for this?

kinhbang89 on 2 Aug 2016

the solution is to use virtualscroll (you can check an example in the commit above)

dadakoko on 2 Aug 2016

After I upgraded from 2.3.0 to 3.0.0, this is happening. Any suggestion how i can use (click) and (press) at the same time?

ozexpert on 13 Apr 2017

After I upgraded from 2.3.0 to 3.0.0, this is happening. Any suggestion how i can use (click) and (press) at the same time?

I have the same problem ..

klochko7 on 25 Apr 2017

👎1

Hello,

I am having the same problem. This happens with any combo of 2 or more events (click and swipe, for example).

List scrolling was working just fine in Ionic 2 and it's now broken after upgrading to Ionic 3.0.1.

Some code here to illustrate the problem.

armeniopinto on 25 Apr 2017

I faced this issue after upgrading from Ionic 2.3.0 to 3.0.1. But in my case I just had the tap event. Fixed it changing to the click event (but I don't have other events besides click). It seems the touch events aren't working well in a list of items after the upgrade. I think something in the touch events are preventing the scroll.

lucasbasquerotto on 25 Apr 2017

I my case I need each item has (click) and (press) events. Adding last one locks scrolling when you try to scroll from the item.
I'm using IONIC 3.0.1.

pablanka on 28 Apr 2017

I was able to solve this problem by creating a custom directive for the press event, based on: http://stackoverflow.com/questions/43492833/ionic-2-setting-callback-for-long-press-event-directive.

import { Directive, ElementRef, OnInit, OnDestroy, Output, EventEmitter } from '@angular/core';
import { Gesture } from "ionic-angular/gestures/gesture";

@Directive({
    selector: '[long-press]'
})

export class PressDirective implements OnInit, OnDestroy {
    el: HTMLElement;
    pressGesture: Gesture;
    @Output('long-press') onPressRelease: EventEmitter<any> = new EventEmitter();

    constructor(el: ElementRef) {
        this.el = el.nativeElement;
    }

    ngOnInit() {
        this.pressGesture = new Gesture(this.el);
        this.pressGesture.listen();

        this.pressGesture.on('press', (event) => {
            this.onPressRelease.emit('released');
        });
    }

    ngOnDestroy() {
        this.pressGesture.destroy();
    }
}

And then use (long-press)="myfunction()"...

JanPeeters on 5 May 2017

👍3

Great! That worked form me!

pablanka on 5 May 2017

👍1

For those still looking to enable scrolling, and not having to use JavaScript code for gestures, here is the solutions that worked for me to use HammerJS in Ionic project and still have scroll.

https://github.com/hammerjs/hammer.js/issues/1014#issuecomment-372513548

Abhishek-Kanitkar on 26 Jun 2018

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.