Ionic-framework: bug: action sheet button handler triggered twice

[Spinnenzunge]

Bug Report

Since ionic 5.2.0 the action sheet button handler is triggered twice (I just tested action sheet, maybe the same problem happens with other overlay buttons as well, e.g. ion-alert)

Ionic version:


[x] 5.2.0

Current behavior:
Action sheet button handler triggered twice

Expected behavior:
Action sheet button handler triggered only once

Related code:

public async presentHandleAttachmentActionSheet(): Promise<void> {
    const actionSheetOptions: ActionSheetOptions = {
      buttons: [
        {
          text: this.translationService.translate('action.delete'),
          role: 'destructive',
          handler: () => {
            console.log('delete clicked');
          }
        },
        {
          text: this.translationService.translate('action.show'),
          handler: () => {
            console.log('open clicked');
          }
        },
        {
          text: 'cancel'
          role: 'cancel'
        }
      ]
    };

    const actionSheet = await this.actionSheetController.create(actionSheetOptions);
    await actionSheet.present();
  }

Console log is triggered twice in this example on click on one of the buttons

Ionic info:

Ionic:

   Ionic CLI                     : 6.10.0 (/Users/pascalgraf/.nvm/versions/node/v12.11.1/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.2.0
   @angular-devkit/build-angular : 0.803.25
   @angular-devkit/schematics    : 8.3.25
   @angular/cli                  : 8.3.25
   @ionic/angular-toolkit        : 2.2.0

Cordova:

   Cordova CLI       : 9.0.0 ([email protected])
   Cordova Platforms : ios 5.1.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 2.4.1, (and 26 other plugins)

Utility:

   cordova-res (update available: 0.14.0) : 0.9.0
   native-run (update available: 1.0.0)   : 0.2.9

System:

   Android SDK Tools : 26.1.1 (/Users/pascalgraf/Library/Android/sdk)
   ios-deploy        : 1.9.4
   ios-sim           : 8.0.2
   NodeJS            : v12.11.1 (/Users/pascalgraf/.nvm/versions/node/v12.11.1/bin/node)
   npm               : 6.13.7
   OS                : macOS Catalina
   Xcode             : Xcode 11.5 Build version 11E608c

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please provide a reproduction with the minimum amount of code required to reproduce the issue. Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

For a guide on how to create a good reproduction, see our Contributing Guide.

[Spinnenzunge]

Here is a repo for reproduction https://github.com/Spinnenzunge/action-sheet-button-bug

[liamdebeasi]

Thanks for the follow up. I am unable to reproduce the issue you are reporting. Can you provide some steps to reproduce?

[rdlabo]

I confirmed this problem. This seems ios mode only.

Thanks.

[liamdebeasi]

I was able to reproduce this behavior as well. It looks like https://github.com/ionic-team/ionic/issues/21499 and this issue are caused by the same underlying issue.

It looks like Chrome dispatches a click event (even when doing the haptic gesture) whereas Safari does not.

This appears to be a browser issue, but I will see if there is a fix we can apply in Ionic Framework.

[rdlabo]

Thank you for confirmation.
Is true! I also confirmed that it works fine on Safari and Capacitor iOS: https://github.com/ionic-team/ionic/issues/21499

[liamdebeasi]

Can you try the following dev build and let me know if it resolves the issue?

5.3.0-dev.202006111615.b37c158

[rdlabo]

I confirmed fix of double click at action-sheet👍

[aces-tm]

@liamdebeasi To confirm that this is happening on alert. Also when I click on ok button on alert and if there is a button under it it will trigger that action as well.

[kuzinkovdmitry]

When this issue will be fixes?
Because i still have it in my project

[aces-tm]

@kuzinkovdmitry If it is critical for you to release your app use 5.1.1 and everything will work fine.

[liamdebeasi]

Glad to hear the bug is resolved with the dev build! I will get this merged soon. To be clear, this bug should not affect apps running in a production environment.

The bug only appears when running in iOS mode in Google Chrome. In other words, if your app runs in iOS mode on an iOS device, you will not have this issue.

[liamdebeasi]

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic/pull/21506, and a fix will be available in the next release of Ionic Framework.

[aces-tm]

@liamdebeasi FYI I see this issue running ionic/angular 5.1.1 in production

[ionitron-bot[bot]]

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.