Within my ion-list, I have sliding items that are dynamically created using a for loop. Interestingly, when clicking on an item to navigate to another page, everything works fine. However, upon sliding an item, a button is revealed but it requires two clicks (90% of the time) to trigger any action.
I've attempted:
To use the "(click)" event in both the <ion-item> and <ion-avatar> tags without success. Additionally, the list being stored in Ionic storage via this.storage.set('list') does not seem to impact this behavior. The number of list items also has no effect. Moreover, the ion-list within the <div *ngIf = "loaded"> doesn't pose any issues either. Could it be possible that the item covers the ion-item-options causing the second click to register as a click on the actual button?
I even added a hard-coded item with sliding options to no avail...
This issue has been reported 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 peculiar behavior.
I am really keen on utilizing this feature, but if a solution cannot be found, I will need to explore alternative options... Thank you in advance for your assistance.
edit
I tried replicating the code from IonicFramework, and surprisingly, encountered the same outcome.
Following the provided example, I made slight adjustments to my code. Moving the position of the item-options (from end to start) did improve the situation slightly (now requiring only 70% of the time to be clicked twice).
Feel free to check out the example on GitHub here