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

[Sunny41]

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

[liamdebeasi]

Thanks for the issue. Can you provide a repo with the code required to reproduce this issue? I am unable to reproduce this issue using the code you have provided.

[Sunny41]

sure thing: https://github.com/Sunny41/horses.git
its occuring in pages/horse-list aswell as in wishlist

[liamdebeasi]

Can you provide some steps to reproduce? I'm not quite sure how to navigate your app.

[Sunny41]

steps to reproduce
good point, you wouldn't be able to login...
the point is, im letting the user create an item and it's added to a list. this list ist stored in ionic storage with this.storage.set('list');
and the ion-list is created from this list above. so far so good this doesn't cause any problems.
what i thought of yesterday:
the function called by the ion-item-option is async:

async showSureAlert(index, item) {
    console.log('clicked');
    const text: any = [];
    const alert = await this.alertCtrl.create({
      header: text.header = this.translateService.instant('delete'),
      message: text.message = this.translateService.instant('Warning.deleteHorse') + ' ' + this.horses[index][0].name + '?',
      buttons: [
        {
          text: text.next = this.translateService.instant('no'),
          handler: () => {

          }
        },
        {
          text: text.next = this.translateService.instant('yes'),
          handler: () => {
            // delete horsename
            this.deleteHorse(index);
          }
        }
      ],
      backdropDismiss: false
    });
    console.log('alert created');
    await alert.present();
    item.close();
  }

and that's it... I don't know what to change any more. the reaction of the button stays the same: it will only go to the function if I click twice. Sometimes, I have to click once, and sometimes twice.

[Sunny41]

nevermind, the async stuff isn't the problem.
and the number of list items doesn't affect the behaviour either.
the ion-list is in a <div *ngIf = "loaded"> and loaded is set false later in deleteHorse() so this shouldn't affect anything.
when i click on the ion-item itself, it behaves correctly.
could it be that the item covers the ion-item-options and thus, the second click is realised as a click on the actual button and not the item?

edit
i tried to add a hard coded item with sliding options - same thing...

[Sunny41]

try it with this simple repository: https://github.com/Sunny41/example.git

[Sunny41]

I have found an improvement. but this doesn't do its job reliable. The first 3-4 times it works with just one click. after that, I have to click twice.

and it looks ugly as hell :D

Buttons in an ion-item option are causing the problem. so at first I had:

 <ion-item-options side="end">
          <ion-item-option (click)="showSureAlert(i, slidingItem)">
            <ion-button class="slideButton" >
              <ion-icon name="trash"></ion-icon>
            </ion-button>
          </ion-item-option>
        </ion-item-options>

and now:

<ion-item-options side="end">
          <ion-item-option (click)="showSureAlert(i, slidingItem)">
              <ion-icon name="trash"></ion-icon>
          </ion-item-option>
        </ion-item-options>

still no solution, but better...

[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

[dylanvdmerwe]

@alexmelville7 @Sunny41 I am trying to reproduce the issue but am not successful: https://stackblitz.com/edit/ionic-v4-angular-tabs-2bfhcu?file=src%2Fapp%2Ftab1%2Ftab1.page.html

I even tried waiting for data (async) but was not able to reproduce.

Please can you provide a repo so that we can look into this more.

[stewones]

that's a state mutation problem.
quickfix is to inject ChangeDetectorRef to your component class and call detectChanges()

[wojo1086]

I'm having this same issue. Most of the time, I need to click twice to trigger the (click) function on ion-item-option.

<ion-item-sliding *ngFor="let player of players.controls; let i = index">
    <ion-item>{{player.value.id}}</ion-item>
    <ion-item-options side="end">
        <ion-item-option (click)="removePlayer(i)">
            <ion-icon name="trash"></ion-icon>
            Remove
        </ion-item-option>
    </ion-item-options>
</ion-item-sliding>

 Ionic CLI                     : 5.4.6 
 Ionic Framework               : @ionic/angular 4.11.5
 @angular-devkit/build-angular : 0.801.3
 @angular-devkit/schematics    : 8.1.3
 @angular/cli                  : 8.1.3
 @ionic/angular-toolkit        : 2.1.1

@stewwan I don't see how that's a fix. Where would you even call detectChanges()?

[liamdebeasi]

Is someone able to provide a repo with the code required to reproduce this issue?

[stewones]

@wojo1086

https://angular.io/api/core/ChangeDetectorRef

When you click something it must call detectChanges to trigger an update inside the ionic component

[wojo1086]

@liamdebeasi I'll work on setting one up.

@stewwan The problem we're having is when we click that "something," the click handler doesn't get called. You can't run detectChanges() in a function that's not even getting called.

[stewones]

Are you sure it’s not being called?

Well I was facing the same and have fixed by triggering detection. too bad it doesn't work for you.

[wojo1086]

@stewwan Yeah, I'm sure. I'll get a repo going so everyone can see what's going on.

[ionitron-bot]

Thanks for the issue! This issue is being closed due to the lack of a reply. 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.

Thank you for using Ionic!

[kensodemann]

@liamdebeasi - it looks like this was closed and locked since we never got a repro repo.

I have one here: https://github.com/ionic-team/tea-taster-angular

• Go to the "Tasting Notes" tab and enter a few notes.
• swipe left to reveal "Delete" button
• immediatly click on it, like right away immediately, the item will not delete
• press the "Delete" button again, and poof...

Note: the immediatly is important. If you give yourself a "normal human" length pause to digest what you are looking at before clicking on the button, then it works fine on the first click. It is only if you click immediately that the issue occurs.

[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.