Ionic 4 / Angular: ion-item-option needs to be clicked twice

Ionic 4 Angluar

I’m submitting a …

[x ] bug report [ ] feature request

Current behavior: I have an ion-list with sliding items in it and crate these with a for loop. You can click on the item itself and the router navigates to another page. When you slide an item, a button is revealed. and this Button needs to be clicked twice (at 90% of the time) to fire.

Expected behavior: Click once to fire event (in my case: Open a Popup)

Related code:

<ion-list *ngFor="let item of items; let i = index" routerDirection="forward">
      <ion-item-sliding #slidingItem (click)="dosomething()">
        <ion-item >
        <ion-avatar>
          <img [src]=items[0].imgUrl>
        </ion-avatar>
        <h2>{{item[0].name}}</h2>
      </ion-item>
      <ion-item-options side="end">
          <ion-item-option (click)="dosomethingelse(i, $event, slidingItem)">
            <ion-button class="slideButton" >
              <ion-icon name="trash"></ion-icon>
            </ion-button>
          </ion-item-option>
        </ion-item-options>
      </ion-item-sliding>
    </ion-list>

also tried: (click) in the <ion-item> and the <ion-avatar> tags. Same behaviour 😦

My ionic info:

Ionic CLI                     : 5.2.4
Ionic Framework               : @ionic/angular 4.7.4
@angular-devkit/build-angular : 0.801.3
@angular-devkit/schematics    : 8.1.3
@angular/cli                  : 8.1.3
@ionic/angular-toolkit        : 2.0.0

[alexmelville7]

I am also experiencing this issue. Unlike @Sunny41 mine is still requiring double clicks even without a button in the ion-item.

<ion-item-sliding *ngFor="let witness of claim.witness; let i=index">
    <ion-item detail='true' (click)='witnessDetail(i)'>
        <ion-icon name="person" slot='start'></ion-icon>
        <ion-label class="ion-text-wrap">
            <ion-text>Witness {{i + 1}}</ion-text>
            <p>{{witness.witnessFirstName + ' ' + witness.witnessLastName}}</p>
        </ion-label>
    </ion-item>
    <ion-item-options side="end">
        <ion-item-option color="danger" (click)="delete(i)">Delete</ion-item-option>
    </ion-item-options>
</ion-item-sliding>

Ionic CLI                     : 5.2.3
Ionic Framework               : @ionic/angular 4.11.1
@angular-devkit/build-angular : 0.803.0
@angular-devkit/schematics    : 8.3.0
@angular/cli                  : 8.3.0
@ionic/angular-toolkit        : 2.0.0

[kensodemann]

A minor update after further testing:

• I have only been able to replicate while running on an iOS device
• I have only been able to replicate when I accidentally perform a minor scrolling operation while opening the -ion-item-sliding, so having a slight up or down motion while also dragging left.

I suppose I could load up my screen with a bunch of fake data so it would actually scroll and see if it would actually occur then on Android, but I have not done that.

It is likely easier to repro on iOS because of the bounce effect.