[fix](alert, actionSheet, picker and toast): Call pressed button handler, regardless 'role'

core/src/components/action-sheet/action-sheet.tsx

@@ -255,12 +255,9 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
 
   private async buttonClick(button: ActionSheetButton) {
     const role = button.role;
-    if (isCancel(role)) {
-      return this.dismiss(button.data, role);
-    }
     const shouldDismiss = await this.callButtonHandler(button);
-    if (shouldDismiss) {
-      return this.dismiss(button.data, button.role);
+    if (isCancel(role) || shouldDismiss) {
+      return this.dismiss(button.data, role);
     }
     return Promise.resolve();
   }
@@ -289,9 +286,12 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
   };
 
   private dispatchCancelHandler = (ev: CustomEvent) => {
-    const role = ev.detail.role;
+    const button = ev.detail;
+    const role = button.role;
     if (isCancel(role)) {
-      const cancelButton = this.getButtons().find((b) => b.role === 'cancel');
+      const cancelButton = this.getButtons().find((b) => {
+        return b === button && b.role === 'cancel';
+      });
       this.callButtonHandler(cancelButton);
     }
   };

core/src/components/alert/alert.tsx

@@ -466,12 +466,9 @@ export class Alert implements ComponentInterface, OverlayInterface {
   private async buttonClick(button: AlertButton) {
     const role = button.role;
     const values = this.getValues();
-    if (isCancel(role)) {
-      return this.dismiss({ values }, role);
-    }
     const returnData = await this.callButtonHandler(button, values);
-    if (returnData !== false) {
-      return this.dismiss({ values, ...returnData }, button.role);
+    if (isCancel(role) || returnData !== false) {
+      return this.dismiss({ values, ...returnData }, role);
     }
     return false;
   }
@@ -673,9 +670,12 @@ export class Alert implements ComponentInterface, OverlayInterface {
   };
 
   private dispatchCancelHandler = (ev: CustomEvent) => {
-    const role = ev.detail.role;
+    const button = ev.detail;
+    const role = button.role;
     if (isCancel(role)) {
-      const cancelButton = this.processedButtons.find((b) => b.role === 'cancel');
+      const cancelButton = this.processedButtons.find((b) => {
+        return b === button && b.role === 'cancel';
+      });
       this.callButtonHandler(cancelButton);
     }
   };

core/src/components/alert/test/basic/alert.e2e.ts

@@ -135,6 +135,50 @@ configs({ themes: ['light', 'dark'] }).forEach(({ config, screenshot, title }) =
   });
 });
 
+configs().forEach(({ config, screenshot, title }) => {
+  test.describe(title('Test cancel buttons'), () => {
+    let alertFixture!: AlertFixture;
+
+    test.beforeEach(async ({ page }) => {
+      await page.goto('/src/components/alert/test/basic', config);
+      alertFixture = new AlertFixture(page, screenshot);
+    });
+
+    test('cancel button 1', async ({ page }) => {
+      await alertFixture.open('#multipleCancelButtons');
+      const optBtn1 = page.locator('ion-alert button.cancel1-btn');
+      await optBtn1.click();
+      const confirmOptBtn1Alert = page.locator('ion-alert[data-testid=cancel1-btn-clicked]');
+      const optBtn1AlertInfo = confirmOptBtn1Alert.locator('.alert-message').innerText();
+      const optBtn1AlertOkBtn = confirmOptBtn1Alert.locator('.alert-button-group button');
+      expect(await optBtn1AlertInfo).toBe('cancel1-btn-clicked');
+      await alertFixture.screenshot('alertCancelBtn1');
+      await optBtn1AlertOkBtn.click();
+    });
+
+    test('cancel button 2', async ({ page }) => {
+      await alertFixture.open('#multipleCancelButtons');
+      const optBtn2 = page.locator('ion-alert button.cancel2-btn');
+      await optBtn2.click();
+      const confirmOptBtn2Alert = page.locator('ion-alert[data-testid=cancel2-btn-clicked]');
+      const optBtn2AlertInfo = confirmOptBtn2Alert.locator('.alert-message').innerText();
+      const optBtn2AlertOkBtn = confirmOptBtn2Alert.locator('.alert-button-group button');
+      expect(await optBtn2AlertInfo).toBe('cancel2-btn-clicked');
+      await alertFixture.screenshot('alertCancelBtn2');
+      await optBtn2AlertOkBtn.click();
+    });
+
+    test('cancel button 3', async ({ page }) => {
+      await alertFixture.open('#multipleCancelButtons');
+      const ionAlertDidDismiss = await page.spyOnEvent('ionAlertDidDismiss');
+      const optBtn3 = page.locator('ion-alert button.cancel3-btn');
+      await optBtn3.click();
+      await ionAlertDidDismiss.next();
+      expect(ionAlertDidDismiss).toHaveReceivedEventDetail({ data: { values: undefined }, role: 'cancel' });
+    });
+  });
+});
+
 class AlertFixture {
   readonly page: E2EPage;
   readonly screenshotFn?: (file: string) => string;

core/src/components/alert/test/basic/index.html

@@ -31,6 +31,9 @@
         <button class="custom-accordion-button" id="basic" onclick="presentAlert()">Alert</button>
         <button id="longMessage" onclick="presentAlertLongMessage()">Alert Long Message</button>
         <button id="multipleButtons" onclick="presentAlertMultipleButtons()">Multiple Buttons (>2)</button>
+        <button id="multipleCancelButtons" onclick="presentAlertMultipleCancelButtons()">
+          Multiple Cancel Buttons (>2)
+        </button>
         <button id="noMessage" onclick="presentAlertNoMessage()">Alert No Message</button>
         <button id="asyncHandler" onclick="presentAlertAsyncHandler()">Alert Async Handler</button>
         <button id="confirm" onclick="presentAlertConfirm()">Confirm</button>
@@ -115,6 +118,50 @@
         });
       }
 
+      function confirmAlertCancelBtns(expectedDataTestId) {
+        openAlert({
+          header: 'Alert',
+          subHeader: 'CancelBtnClicked',
+          message: expectedDataTestId,
+          buttons: ['OK'],
+          htmlAttributes: {
+            'data-testid': expectedDataTestId,
+          },
+        });
+      }
+
+      function presentAlertMultipleCancelButtons() {
+        openAlert({
+          header: 'Alert',
+          subHeader: 'Subtitle',
+          message: 'This is an alert message.',
+          buttons: [
+            {
+              text: 'Cancel 1',
+              role: 'cancel',
+              cssClass: 'cancel1-btn',
+              handler: () => {
+                confirmAlertCancelBtns('cancel1-btn-clicked');
+              },
+            },
+            {
+              text: 'Cancel 2',
+              role: 'cancel',
+              cssClass: 'cancel2-btn',
+              handler: () => {
+                confirmAlertCancelBtns('cancel2-btn-clicked');
+              },
+            },
+            {
+              text: 'Cancel 3',
+              role: 'cancel',
+              cssClass: 'cancel3-btn',
+            },
+            'Cancel',
+          ],
+        });
+      }
+
       function presentAlertNoMessage() {
         openAlert({
           header: 'Alert',

core/src/components/picker/picker.tsx

@@ -299,12 +299,9 @@ export class Picker implements ComponentInterface, OverlayInterface {
 
   private async buttonClick(button: PickerButton) {
     const role = button.role;
-    if (isCancel(role)) {
-      return this.dismiss(undefined, role);
-    }
     const shouldDismiss = await this.callButtonHandler(button);
-    if (shouldDismiss) {
-      return this.dismiss(this.getSelected(), button.role);
+    if (isCancel(role) || shouldDismiss) {
+      return this.dismiss(this.getSelected(), role);
     }
     return Promise.resolve();
   }
@@ -340,9 +337,12 @@ export class Picker implements ComponentInterface, OverlayInterface {
   };
 
   private dispatchCancelHandler = (ev: CustomEvent) => {
-    const role = ev.detail.role;
+    const button = ev.detail;
+    const role = button.role;
     if (isCancel(role)) {
-      const cancelButton = this.buttons.find((b) => b.role === 'cancel');
+      const cancelButton = this.buttons.find((b) => {
+        return b === button && b.role === 'cancel';
+      });
       this.callButtonHandler(cancelButton);
     }
   };

core/src/components/picker/test/basic/picker.e2e.ts

@@ -26,3 +26,54 @@ configs().forEach(({ title, screenshot, config }) => {
     });
   });
 });
+
+configs({ modes: ['md'], directions: ['ltr', 'rtl'] }).forEach(({ title, config }) => {
+  test.describe(title('picker: button handlers'), () => {
+    test('should call cancel button handler', async ({ page }) => {
+      await page.setContent(
+        `
+      <script type="module">
+        import { pickerController } from '../../../../dist/ionic/index.esm.js';
+        window.pickerController = pickerController;
+      </script>
+
+      <button id="open" onclick="openPicker()">Open Picker</button>
+
+      <div id="result"></div>
+
+      <script>
+        async function openPicker() {
+          const picker = await pickerController.create({
+            buttons: [
+              {
+                text: 'Cancel',
+                role: 'cancel',
+                cssClass: 'cancel-btn',
+                handler: () => {
+                  document.querySelector('#result').textContent = 'cancelled';
+                }
+              }
+            ]
+          });
+          await picker.present();
+        }
+      </script>
+      `,
+        config
+      );
+
+      const didPresent = await page.spyOnEvent('ionPickerDidPresent');
+
+      const openBtn = page.locator('#open');
+      await openBtn.click();
+
+      await didPresent.next();
+
+      const cancelBtn = page.locator('ion-picker .cancel-btn');
+      await cancelBtn.click();
+
+      const result = page.locator('#result');
+      await expect(result).toHaveText('cancelled');
+    });
+  });
+});

core/src/components/toast/test/buttons/index.html

@@ -14,7 +14,8 @@
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
   </head>
   <script type="module">
-    import { toastController } from '../../../../dist/ionic/index.esm.js';
+    import { alertController, toastController } from '../../../../dist/ionic/index.esm.js';
+    window.alertController = alertController;
     window.toastController = toastController;
   </script>
   <body>
@@ -35,6 +36,10 @@
           Multiple Buttons
         </ion-button>
 
+        <ion-button id="multipleCancelButtons" expand="block" onclick="presentToastWithMultipleCancelButtons()">
+          Multiple Cancel Buttons
+        </ion-button>
+
         <ion-button id="longButton" expand="block" onclick="presentToastWithLongButton()">
           Really Long Button
         </ion-button>
@@ -45,10 +50,16 @@
       window.addEventListener('ionToastDidDismiss', function (e) {
         console.log('didDismiss', e);
       });
+
       window.addEventListener('ionToastWillDismiss', function (e) {
         console.log('willDismiss', e);
       });
 
+      async function openAlert(opts) {
+        const alert = await alertController.create(opts);
+        await alert.present();
+      }
+
       async function presentCloseArrayToast() {
         const opts = {
           message: 'Are you sure you want to delete this?',
@@ -118,6 +129,50 @@
         return await presentToastWithOptions(opts);
       }
 
+      function confirmAlertCancelBtns(expectedDataTestId) {
+        openAlert({
+          header: 'Alert',
+          subHeader: 'CancelBtnClicked',
+          message: expectedDataTestId,
+          buttons: ['OK'],
+          htmlAttributes: {
+            'data-testid': expectedDataTestId,
+          },
+        });
+      }
+
+      async function presentToastWithMultipleCancelButtons() {
+        const opts = {
+          message: 'Warning.',
+          buttons: [
+            {
+              text: 'C1',
+              role: 'cancel',
+              cssClass: 'cancel1-btn',
+              handler: () => {
+                confirmAlertCancelBtns('cancel1-btn-clicked');
+              },
+            },
+            {
+              text: 'C2',
+              role: 'cancel',
+              cssClass: 'cancel2-btn',
+              handler: () => {
+                confirmAlertCancelBtns('cancel2-btn-clicked');
+              },
+            },
+            {
+              text: 'C3',
+              role: 'cancel',
+              cssClass: 'cancel3-btn',
+            },
+            'Cancel',
+          ],
+        };
+
+        return await presentToastWithOptions(opts);
+      }
+
       async function presentToastWithLongButton() {
         const opts = {
           message: 'This item already has the label "travel". You can add a new label.',