Ion-item-option button needs to be clicked twice

Question

I have an ion-list with sliding items in it and create 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.

I already tried:

(click) in the <ion-item> and the <ion-avatar> tags. Same behaviour :( I'm 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. 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? I tried to add a hard coded item with sliding options - same thing...

and reported it to ionic on github

<div *ngIf="loaded">
<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)="showSureAlert(i, slidingItem)">
            <ion-button class="slideButton" >
              <ion-icon name="trash"></ion-icon>
            </ion-button>
          </ion-item-option>
        </ion-item-options>
      </ion-item-sliding>
    </ion-list>
</div>

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();
  }

The console.log() is also affected by this.

I would really like to use this but if there is no solution, I have to find another thing... thanks in advance for your help.

edit

I copied the code from ionicframework.com -> same result

And adapted my code to this example. Changing the position of the item-options (from end to start) made it a bit better(70% of the time it needs to be clicked twice)

have a look here: example on github

Answer 1

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

edit: at first with Ionic 4, there was this weird problem with ShadowDOM and i had to wrap my whole CSS file with "host { }" to work correctly. i removed this and its working fine. silly thing.