From 5bfcd138b5f29e0ab1a0bdac1e7e2588906b0b0b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jose=CC=81=20Rio?= <jose.rio@hotmail.com>
Date: Mon, 29 Jan 2024 16:45:40 +0000
Subject: [PATCH 01/22] [fix](alert): call pressed button handler, regardless
 'role'

---
 core/src/components/alert/alert.tsx           |  8 +++--
 .../components/alert/test/basic/index.html    | 31 ++++++++++++++++++-
 2 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/core/src/components/alert/alert.tsx b/core/src/components/alert/alert.tsx
index 90a1c281bbf..d43b29d5343 100644
--- a/core/src/components/alert/alert.tsx
+++ b/core/src/components/alert/alert.tsx
@@ -461,8 +461,9 @@ export class Alert implements ComponentInterface, OverlayInterface {
 
   private async buttonClick(button: AlertButton) {
     const role = button.role;
+    const hasHandler = button.handler !== undefined;
     const values = this.getValues();
-    if (isCancel(role)) {
+    if (isCancel(role) && hasHandler === false) {
       return this.dismiss({ values }, role);
     }
     const returnData = await this.callButtonHandler(button, values);
@@ -669,9 +670,10 @@ 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) => (b === button && b.role === 'cancel'));
       this.callButtonHandler(cancelButton);
     }
   };
diff --git a/core/src/components/alert/test/basic/index.html b/core/src/components/alert/test/basic/index.html
index 74a6f6c68d2..a72a64cc455 100644
--- a/core/src/components/alert/test/basic/index.html
+++ b/core/src/components/alert/test/basic/index.html
@@ -31,13 +31,13 @@
         <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>
         <button id="prompt" onclick="presentAlertPrompt()">Prompt</button>
         <button id="radio" onclick="presentAlertRadio()">Radio</button>
         <button id="checkbox" onclick="presentAlertCheckbox()">Checkbox</button>
-        <button onclick="presentWithCssClass()">CssClass</button>
       </ion-content>
 
       <style>
@@ -114,6 +114,35 @@
           ],
         });
       }
+      
+      function presentAlertMultipleCancelButtons() {
+        openAlert({
+          header: 'Alert',
+          subHeader: 'Subtitle',
+          message: 'This is an alert message.',
+          buttons: [
+            {
+              text: 'Cancel 1',
+              role: 'cancel',
+              handler: () => {
+                console.log('Cancel btn 1');
+              }
+            }, 
+            {
+              text: 'Cancel 2',
+              role: 'cancel',
+              handler: () => {
+                console.log('Cancel btn 2');
+              }
+            },
+            {
+              text: 'Cancel 3',
+              role: 'cancel',
+            },
+            'Cancel',
+          ],
+        });
+      }
 
       function presentAlertNoMessage() {
         openAlert({

From 4ce2e617758517d5a2c054646b6726d53aef4cca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jose=CC=81=20Rio?= <jose.rio@hotmail.com>
Date: Mon, 29 Jan 2024 16:52:18 +0000
Subject: [PATCH 02/22] [fix](alert): rollback unintended removed line.

---
 core/src/components/alert/test/basic/index.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/core/src/components/alert/test/basic/index.html b/core/src/components/alert/test/basic/index.html
index a72a64cc455..33b9d7500e6 100644
--- a/core/src/components/alert/test/basic/index.html
+++ b/core/src/components/alert/test/basic/index.html
@@ -38,6 +38,7 @@
         <button id="prompt" onclick="presentAlertPrompt()">Prompt</button>
         <button id="radio" onclick="presentAlertRadio()">Radio</button>
         <button id="checkbox" onclick="presentAlertCheckbox()">Checkbox</button>
+        <button onclick="presentWithCssClass()">CssClass</button>
       </ion-content>
 
       <style>

From 708ad1538dca59d3896cb6eca0557fd7e2d8fa7a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jose=CC=81=20Rio?= <jose.rio@hotmail.com>
Date: Wed, 31 Jan 2024 10:59:45 +0000
Subject: [PATCH 03/22] [fix](alert): update to improve code readability.

---
 core/src/components/alert/alert.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/core/src/components/alert/alert.tsx b/core/src/components/alert/alert.tsx
index d43b29d5343..558ffc71f27 100644
--- a/core/src/components/alert/alert.tsx
+++ b/core/src/components/alert/alert.tsx
@@ -461,14 +461,13 @@ export class Alert implements ComponentInterface, OverlayInterface {
 
   private async buttonClick(button: AlertButton) {
     const role = button.role;
-    const hasHandler = button.handler !== undefined;
     const values = this.getValues();
-    if (isCancel(role) && hasHandler === false) {
+    if (isCancel(role) && button.handler === undefined) {
       return this.dismiss({ values }, role);
     }
     const returnData = await this.callButtonHandler(button, values);
     if (returnData !== false) {
-      return this.dismiss({ values, ...returnData }, button.role);
+      return this.dismiss({ values, ...returnData }, role);
     }
     return false;
   }
@@ -673,7 +672,9 @@ export class Alert implements ComponentInterface, OverlayInterface {
     const button = ev.detail;
     const role = button.role;
     if (isCancel(role)) {
-      const cancelButton = this.processedButtons.find((b) => (b === button && b.role === 'cancel'));
+      const cancelButton = this.processedButtons.find((b) => { 
+        return b === button && b.role === 'cancel';
+      });
       this.callButtonHandler(cancelButton);
     }
   };

From 07236f1e19a3b68e695fbeec473d1c84ae97d099 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jose=CC=81=20Rio?= <jose.rio@hotmail.com>
Date: Thu, 1 Feb 2024 13:53:47 +0000
Subject: [PATCH 04/22] [fix](alert): Run lint.fix after PR test-core-lint
 fail.

---
 core/src/components/alert/alert.tsx             |  2 +-
 core/src/components/alert/test/basic/index.html | 12 +++++++-----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/core/src/components/alert/alert.tsx b/core/src/components/alert/alert.tsx
index 558ffc71f27..499aebf50b6 100644
--- a/core/src/components/alert/alert.tsx
+++ b/core/src/components/alert/alert.tsx
@@ -672,7 +672,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
     const button = ev.detail;
     const role = button.role;
     if (isCancel(role)) {
-      const cancelButton = this.processedButtons.find((b) => { 
+      const cancelButton = this.processedButtons.find((b) => {
         return b === button && b.role === 'cancel';
       });
       this.callButtonHandler(cancelButton);
diff --git a/core/src/components/alert/test/basic/index.html b/core/src/components/alert/test/basic/index.html
index 33b9d7500e6..769874adf43 100644
--- a/core/src/components/alert/test/basic/index.html
+++ b/core/src/components/alert/test/basic/index.html
@@ -31,7 +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="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,7 +117,7 @@
           ],
         });
       }
-      
+
       function presentAlertMultipleCancelButtons() {
         openAlert({
           header: 'Alert',
@@ -127,14 +129,14 @@
               role: 'cancel',
               handler: () => {
                 console.log('Cancel btn 1');
-              }
-            }, 
+              },
+            },
             {
               text: 'Cancel 2',
               role: 'cancel',
               handler: () => {
                 console.log('Cancel btn 2');
-              }
+              },
             },
             {
               text: 'Cancel 3',

From 570270bbc698e8a098b019f092c75f79b1c1cda7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jose=CC=81=20Rio?= <jose.rio@hotmail.com>
Date: Fri, 9 Feb 2024 12:20:29 +0000
Subject: [PATCH 05/22] [fix](alert): Adding validation if button handler
 returns false.

---
 core/src/components/alert/alert.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/core/src/components/alert/alert.tsx b/core/src/components/alert/alert.tsx
index 499aebf50b6..fe21b933dc1 100644
--- a/core/src/components/alert/alert.tsx
+++ b/core/src/components/alert/alert.tsx
@@ -462,11 +462,8 @@ export class Alert implements ComponentInterface, OverlayInterface {
   private async buttonClick(button: AlertButton) {
     const role = button.role;
     const values = this.getValues();
-    if (isCancel(role) && button.handler === undefined) {
-      return this.dismiss({ values }, role);
-    }
     const returnData = await this.callButtonHandler(button, values);
-    if (returnData !== false) {
+    if (isCancel(role) || returnData !== false) {
       return this.dismiss({ values, ...returnData }, role);
     }
     return false;

From 2be3bd9003802d81a96b10baf14ed9b92a28293a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jose=CC=81=20Rio?= <jose.rio@hotmail.com>
Date: Fri, 9 Feb 2024 12:22:15 +0000
Subject: [PATCH 06/22] [fix](action-sheet): call pressed button handler,
 regardless 'role'

---
 core/src/components/action-sheet/action-sheet.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/core/src/components/action-sheet/action-sheet.tsx b/core/src/components/action-sheet/action-sheet.tsx
index 984e24cdaa6..a012ba0afd4 100644
--- a/core/src/components/action-sheet/action-sheet.tsx
+++ b/core/src/components/action-sheet/action-sheet.tsx
@@ -251,12 +251,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();
   }
@@ -285,9 +282,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);
     }
   };

From 42e0c83ecbfa956065742ee46ff30d2051994cf7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jose=CC=81=20Rio?= <jose.rio@hotmail.com>
Date: Fri, 9 Feb 2024 12:22:35 +0000
Subject: [PATCH 07/22] [fix](picker): call pressed button handler, regardless
 'role'

---
 core/src/components/picker/picker.tsx         | 14 ++---
 .../components/picker/test/basic/index.html   | 61 ++++++++++++++-----
 2 files changed, 54 insertions(+), 21 deletions(-)

diff --git a/core/src/components/picker/picker.tsx b/core/src/components/picker/picker.tsx
index 42322889191..727e9fc67e7 100644
--- a/core/src/components/picker/picker.tsx
+++ b/core/src/components/picker/picker.tsx
@@ -295,12 +295,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();
   }
@@ -336,9 +333,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);
     }
   };
diff --git a/core/src/components/picker/test/basic/index.html b/core/src/components/picker/test/basic/index.html
index bf88763140c..e969da76ed5 100644
--- a/core/src/components/picker/test/basic/index.html
+++ b/core/src/components/picker/test/basic/index.html
@@ -22,6 +22,9 @@
     <ion-app>
       <ion-content class="ion-padding">
         <ion-button id="basic" expand="block" onclick="presentPicker()">Show Picker</ion-button>
+        <ion-button id="basicMultipleCancelBtns" expand="block" onclick="presentPicker('', false)"
+          >Show Picker w/ Multiple Cancel btns</ion-button
+        >
         <ion-button id="custom" expand="block" onclick="presentPicker('my-custom-class')"
           >Show Custom Picker</ion-button
         >
@@ -97,22 +100,52 @@
         },
       ];
 
-      async function presentPicker(customClass) {
-        const pickerElement = await pickerController.create({
-          buttons: [
-            {
-              text: 'Cancel',
-              role: 'cancel',
+      const btns = {
+        basic: [
+          {
+            text: 'Cancel',
+            role: 'cancel',
+          },
+          {
+            text: 'Save',
+            cssClass: 'save-btn',
+            handler: (ev) => {
+              const v = ev.hours.value;
+              selectedIndex = options.findIndex((opt) => opt.value === v);
             },
-            {
-              text: 'Save',
-              cssClass: 'save-btn',
-              handler: (ev) => {
-                const v = ev.hours.value;
-                selectedIndex = options.findIndex((opt) => opt.value === v);
-              },
+          },
+        ],
+
+        multipleCancelBtns: [
+          {
+            text: 'Cancel',
+            role: 'cancel',
+            handler: () => {
+              console.log('Cancel btn');
             },
-          ],
+          },
+          {
+            text: 'Cancel2',
+            role: 'cancel',
+            handler: () => {
+              console.log('Cancel2 btn');
+              return false;
+            },
+          },
+          {
+            text: 'Save',
+            cssClass: 'save-btn',
+            handler: (ev) => {
+              const v = ev.hours.value;
+              selectedIndex = options.findIndex((opt) => opt.value === v);
+            },
+          },
+        ],
+      };
+
+      async function presentPicker(customClass, isBasic = true) {
+        const pickerElement = await pickerController.create({
+          buttons: isBasic ? btns.basic : btns.multipleCancelBtns,
           columns: [
             {
               name: 'hours',

From 14ba21b7d3c033aacf099fdc02dc162227e36c7e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jose=CC=81=20Rio?= <jose.rio@hotmail.com>
Date: Fri, 9 Feb 2024 12:22:48 +0000
Subject: [PATCH 08/22] [fix](toast): call pressed button handler, regardless
 'role'

---
 .../components/toast/test/buttons/index.html  | 36 +++++++++++++++++++
 core/src/components/toast/toast.tsx           | 12 +++----
 2 files changed, 42 insertions(+), 6 deletions(-)

diff --git a/core/src/components/toast/test/buttons/index.html b/core/src/components/toast/test/buttons/index.html
index afc47f1337b..bf4f98f6923 100644
--- a/core/src/components/toast/test/buttons/index.html
+++ b/core/src/components/toast/test/buttons/index.html
@@ -35,6 +35,10 @@
           Multiple Buttons
         </ion-button>
 
+        <ion-button id="multipleButtons" expand="block" onclick="presentToastWithMultipleCancelButtons()">
+          Multiple Cancel Buttons
+        </ion-button>
+
         <ion-button id="longButton" expand="block" onclick="presentToastWithLongButton()">
           Really Long Button
         </ion-button>
@@ -118,6 +122,38 @@
         return await presentToastWithOptions(opts);
       }
 
+      async function presentToastWithMultipleCancelButtons() {
+        const opts = {
+          message: 'Warning.',
+          buttons: [
+            {
+              text: 'Cancel',
+              side: 'start',
+              role: 'cancel',
+              handler: () => {
+                console.log('Cancel btn');
+              },
+            },
+            {
+              text: 'Cancel1',
+              role: 'cancel',
+              handler: () => {
+                console.log('Cancel1 btn');
+              },
+            },
+            {
+              text: 'Cancel2',
+              role: 'cancel',
+              handler: () => {
+                console.log('Cancel2 btn');
+              },
+            },
+          ],
+        };
+
+        return await presentToastWithOptions(opts);
+      }
+
       async function presentToastWithLongButton() {
         const opts = {
           message: 'This item already has the label "travel". You can add a new label.',
diff --git a/core/src/components/toast/toast.tsx b/core/src/components/toast/toast.tsx
index fe960d3e32e..7a6c1701c1a 100644
--- a/core/src/components/toast/toast.tsx
+++ b/core/src/components/toast/toast.tsx
@@ -522,11 +522,8 @@ export class Toast implements ComponentInterface, OverlayInterface {
 
   private async buttonClick(button: ToastButton) {
     const role = button.role;
-    if (isCancel(role)) {
-      return this.dismiss(undefined, role);
-    }
     const shouldDismiss = await this.callButtonHandler(button);
-    if (shouldDismiss) {
+    if (isCancel(role) || shouldDismiss) {
       return this.dismiss(undefined, role);
     }
     return Promise.resolve();
@@ -550,9 +547,12 @@ export class Toast 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);
     }
   };

From 69bf9a249f837b3c154543cd58469d0c2c9e4537 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jose=CC=81=20Rio?= <jose.rio@hotmail.com>
Date: Tue, 12 Mar 2024 15:29:43 +0000
Subject: [PATCH 09/22] [fix](alert): Tests to ensure proper handler is
 triggered

---
 .../components/alert/test/basic/alert.e2e.ts  | 38 +++++++++++++++++++
 .../components/alert/test/basic/index.html    | 19 +++++++++-
 2 files changed, 55 insertions(+), 2 deletions(-)

diff --git a/core/src/components/alert/test/basic/alert.e2e.ts b/core/src/components/alert/test/basic/alert.e2e.ts
index eed39b22996..48ca2c45cac 100644
--- a/core/src/components/alert/test/basic/alert.e2e.ts
+++ b/core/src/components/alert/test/basic/alert.e2e.ts
@@ -135,6 +135,44 @@ 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', 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 optBtn1AlertOkBtn.click();
+
+      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 optBtn2AlertOkBtn.click();
+
+      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;
diff --git a/core/src/components/alert/test/basic/index.html b/core/src/components/alert/test/basic/index.html
index 769874adf43..7e612c02ac2 100644
--- a/core/src/components/alert/test/basic/index.html
+++ b/core/src/components/alert/test/basic/index.html
@@ -118,6 +118,18 @@
         });
       }
 
+      function confirmpresentAlertMultipleCancelButtons(dataTestIdExpected) {
+        openAlert({
+          header: 'Alert',
+          subHeader: 'CancelBtnClicked',
+          message: dataTestIdExpected,
+          buttons: ['OK'],
+          htmlAttributes: {
+            'data-testid': dataTestIdExpected,
+          },
+        });
+      }
+
       function presentAlertMultipleCancelButtons() {
         openAlert({
           header: 'Alert',
@@ -127,20 +139,23 @@
             {
               text: 'Cancel 1',
               role: 'cancel',
+              cssClass: 'cancel1-btn',
               handler: () => {
-                console.log('Cancel btn 1');
+                confirmpresentAlertMultipleCancelButtons('cancel1-btn-clicked');
               },
             },
             {
               text: 'Cancel 2',
               role: 'cancel',
+              cssClass: 'cancel2-btn',
               handler: () => {
-                console.log('Cancel btn 2');
+                confirmpresentAlertMultipleCancelButtons('cancel2-btn-clicked');
               },
             },
             {
               text: 'Cancel 3',
               role: 'cancel',
+              cssClass: 'cancel3-btn',
             },
             'Cancel',
           ],

From 693a2c3b0627d742b56c515f83699fad58ed36d2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jose=CC=81=20Rio?= <jose.rio@hotmail.com>
Date: Tue, 12 Mar 2024 15:37:30 +0000
Subject: [PATCH 10/22] [fix](alert): lint.fix

---
 core/src/components/alert/test/basic/alert.e2e.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/core/src/components/alert/test/basic/alert.e2e.ts b/core/src/components/alert/test/basic/alert.e2e.ts
index 48ca2c45cac..1377946421d 100644
--- a/core/src/components/alert/test/basic/alert.e2e.ts
+++ b/core/src/components/alert/test/basic/alert.e2e.ts
@@ -151,7 +151,7 @@ configs().forEach(({ config, screenshot, title }) => {
       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");
+      expect(await optBtn1AlertInfo).toBe('cancel1-btn-clicked');
       await optBtn1AlertOkBtn.click();
 
       await alertFixture.open('#multipleCancelButtons');
@@ -160,7 +160,7 @@ configs().forEach(({ config, screenshot, title }) => {
       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");
+      expect(await optBtn2AlertInfo).toBe('cancel2-btn-clicked');
       await optBtn2AlertOkBtn.click();
 
       await alertFixture.open('#multipleCancelButtons');

From 2d9761c0e59b2dbd0797f5e93ca2ba9a3da65756 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jose=CC=81=20Rio?= <jose.rio@hotmail.com>
Date: Tue, 12 Mar 2024 15:58:07 +0000
Subject: [PATCH 11/22] [fix](alert): Method renamed.

---
 core/src/components/alert/test/basic/index.html | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/core/src/components/alert/test/basic/index.html b/core/src/components/alert/test/basic/index.html
index 7e612c02ac2..d3d7c5ada32 100644
--- a/core/src/components/alert/test/basic/index.html
+++ b/core/src/components/alert/test/basic/index.html
@@ -118,14 +118,14 @@
         });
       }
 
-      function confirmpresentAlertMultipleCancelButtons(dataTestIdExpected) {
+      function confirmpAlertCancelBtns(expectedDataTestId) {
         openAlert({
           header: 'Alert',
           subHeader: 'CancelBtnClicked',
-          message: dataTestIdExpected,
+          message: expectedDataTestId,
           buttons: ['OK'],
           htmlAttributes: {
-            'data-testid': dataTestIdExpected,
+            'data-testid': expectedDataTestId,
           },
         });
       }
@@ -141,7 +141,7 @@
               role: 'cancel',
               cssClass: 'cancel1-btn',
               handler: () => {
-                confirmpresentAlertMultipleCancelButtons('cancel1-btn-clicked');
+                confirmpAlertCancelBtns('cancel1-btn-clicked');
               },
             },
             {
@@ -149,7 +149,7 @@
               role: 'cancel',
               cssClass: 'cancel2-btn',
               handler: () => {
-                confirmpresentAlertMultipleCancelButtons('cancel2-btn-clicked');
+                confirmpAlertCancelBtns('cancel2-btn-clicked');
               },
             },
             {

From 610e27572d9892027afe8be2caeae214cec2cbe2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jose=CC=81=20Rio?= <jose.rio@hotmail.com>
Date: Tue, 12 Mar 2024 19:40:07 +0000
Subject: [PATCH 12/22] [fix](picker): Tests to ensure proper handler is
 triggered.

---
 .../components/picker/test/basic/index.html   | 36 +++++++++++++---
 .../picker/test/basic/picker.e2e.ts           | 42 ++++++++++++++++++-
 2 files changed, 71 insertions(+), 7 deletions(-)

diff --git a/core/src/components/picker/test/basic/index.html b/core/src/components/picker/test/basic/index.html
index e969da76ed5..fcb107be57b 100644
--- a/core/src/components/picker/test/basic/index.html
+++ b/core/src/components/picker/test/basic/index.html
@@ -14,7 +14,8 @@
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
   </head>
   <script type="module">
-    import { pickerController } from '../../../../dist/ionic/index.esm.js';
+    import { alertController, pickerController } from '../../../../dist/ionic/index.esm.js';
+    window.alertController = alertController;
     window.pickerController = pickerController;
   </script>
 
@@ -47,6 +48,11 @@
     </style>
 
     <script>
+      async function openAlert(opts) {
+        const alert = await alertController.create(opts);
+        await alert.present();
+      }
+
       selectedIndex = 0;
 
       const options = [
@@ -100,6 +106,18 @@
         },
       ];
 
+      function confirmpAlertCancelBtns(expectedDataTestId) {
+        openAlert({
+          header: 'Alert',
+          subHeader: 'CancelBtnClicked',
+          message: expectedDataTestId,
+          buttons: ['OK'],
+          htmlAttributes: {
+            'data-testid': expectedDataTestId,
+          },
+        });
+      }
+
       const btns = {
         basic: [
           {
@@ -118,20 +136,26 @@
 
         multipleCancelBtns: [
           {
-            text: 'Cancel',
+            text: 'Cancel 1',
             role: 'cancel',
+            cssClass: 'cancel1-btn',
             handler: () => {
-              console.log('Cancel btn');
+              confirmpAlertCancelBtns('cancel1-btn-clicked');
             },
           },
           {
-            text: 'Cancel2',
+            text: 'Cancel 2',
             role: 'cancel',
+            cssClass: 'cancel2-btn',
             handler: () => {
-              console.log('Cancel2 btn');
-              return false;
+              confirmpAlertCancelBtns('cancel2-btn-clicked');
             },
           },
+          {
+            text: 'Cancel 3',
+            role: 'cancel',
+            cssClass: 'cancel3-btn',
+          },
           {
             text: 'Save',
             cssClass: 'save-btn',
diff --git a/core/src/components/picker/test/basic/picker.e2e.ts b/core/src/components/picker/test/basic/picker.e2e.ts
index a2cb087e535..3fb4b6f1fea 100644
--- a/core/src/components/picker/test/basic/picker.e2e.ts
+++ b/core/src/components/picker/test/basic/picker.e2e.ts
@@ -25,4 +25,44 @@ configs().forEach(({ title, screenshot, config }) => {
       await expect(page).toHaveScreenshot(screenshot(`picker-value-selected`));
     });
   });
-});
+
+  test.describe(title('Test cancel buttons'), () => {
+    test('cancel', async ({ page }) => {
+      await page.goto('/src/components/picker/test/basic', config);
+      
+      await page.click('#basicMultipleCancelBtns');
+      const optBtn1 = page.locator('ion-picker 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 optBtn1AlertOkBtn.click();
+
+      await page.click('#basicMultipleCancelBtns');
+      const optBtn2 = page.locator('ion-picker 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 optBtn2AlertOkBtn.click();
+      
+      await page.click('#basicMultipleCancelBtns');
+      const ionPickerDidDismiss = await page.spyOnEvent('ionPickerDidDismiss');
+      const optBtn3 = page.locator('ion-picker button.cancel3-btn');
+      await optBtn3.click();
+      await ionPickerDidDismiss.next();
+      expect(ionPickerDidDismiss).toHaveReceivedEventDetail({
+        data: {
+          hours: {
+            text: '1',
+            value: '01',
+            columnIndex: 0
+          }
+        },
+        role: 'cancel'
+      });
+    });
+  });
+});
\ No newline at end of file

From 6135478a64ee205d17bf2529cb72e5382c913dc0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jose=CC=81=20Rio?= <jose.rio@hotmail.com>
Date: Tue, 12 Mar 2024 19:40:55 +0000
Subject: [PATCH 13/22] [fix](alert): lint

---
 core/src/components/picker/test/basic/picker.e2e.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/core/src/components/picker/test/basic/picker.e2e.ts b/core/src/components/picker/test/basic/picker.e2e.ts
index 3fb4b6f1fea..beb658605ba 100644
--- a/core/src/components/picker/test/basic/picker.e2e.ts
+++ b/core/src/components/picker/test/basic/picker.e2e.ts
@@ -29,7 +29,7 @@ configs().forEach(({ title, screenshot, config }) => {
   test.describe(title('Test cancel buttons'), () => {
     test('cancel', async ({ page }) => {
       await page.goto('/src/components/picker/test/basic', config);
-      
+
       await page.click('#basicMultipleCancelBtns');
       const optBtn1 = page.locator('ion-picker button.cancel1-btn');
       await optBtn1.click();
@@ -47,7 +47,7 @@ configs().forEach(({ title, screenshot, config }) => {
       const optBtn2AlertOkBtn = confirmOptBtn2Alert.locator('.alert-button-group button');
       expect(await optBtn2AlertInfo).toBe('cancel2-btn-clicked');
       await optBtn2AlertOkBtn.click();
-      
+
       await page.click('#basicMultipleCancelBtns');
       const ionPickerDidDismiss = await page.spyOnEvent('ionPickerDidDismiss');
       const optBtn3 = page.locator('ion-picker button.cancel3-btn');
@@ -58,11 +58,11 @@ configs().forEach(({ title, screenshot, config }) => {
           hours: {
             text: '1',
             value: '01',
-            columnIndex: 0
-          }
+            columnIndex: 0,
+          },
         },
-        role: 'cancel'
+        role: 'cancel',
       });
     });
   });
-});
\ No newline at end of file
+});

From 0edd1a0086c4e92b6ba750478a62b3f16691d3c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jose=CC=81=20Rio?= <jose.rio@hotmail.com>
Date: Tue, 12 Mar 2024 19:53:59 +0000
Subject: [PATCH 14/22] [fix](alert): Split cancel buttons tests.

---
 core/src/components/alert/test/basic/alert.e2e.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/core/src/components/alert/test/basic/alert.e2e.ts b/core/src/components/alert/test/basic/alert.e2e.ts
index 1377946421d..e47c4985c67 100644
--- a/core/src/components/alert/test/basic/alert.e2e.ts
+++ b/core/src/components/alert/test/basic/alert.e2e.ts
@@ -144,7 +144,7 @@ configs().forEach(({ config, screenshot, title }) => {
       alertFixture = new AlertFixture(page, screenshot);
     });
 
-    test('cancel', async ({ page }) => {
+    test('cancel button 1', async ({ page }) => {
       await alertFixture.open('#multipleCancelButtons');
       const optBtn1 = page.locator('ion-alert button.cancel1-btn');
       await optBtn1.click();
@@ -153,7 +153,9 @@ configs().forEach(({ config, screenshot, title }) => {
       const optBtn1AlertOkBtn = confirmOptBtn1Alert.locator('.alert-button-group button');
       expect(await optBtn1AlertInfo).toBe('cancel1-btn-clicked');
       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();
@@ -162,7 +164,9 @@ configs().forEach(({ config, screenshot, title }) => {
       const optBtn2AlertOkBtn = confirmOptBtn2Alert.locator('.alert-button-group button');
       expect(await optBtn2AlertInfo).toBe('cancel2-btn-clicked');
       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');

From 6967dda7f48d40971ca3794237deeb3a80305aa6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jose=CC=81=20Rio?= <jose.rio@hotmail.com>
Date: Tue, 12 Mar 2024 19:58:11 +0000
Subject: [PATCH 15/22] [fix](picker): Split cancel buttons tests.

---
 core/src/components/picker/test/basic/picker.e2e.ts | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/core/src/components/picker/test/basic/picker.e2e.ts b/core/src/components/picker/test/basic/picker.e2e.ts
index beb658605ba..2e6ee24ed91 100644
--- a/core/src/components/picker/test/basic/picker.e2e.ts
+++ b/core/src/components/picker/test/basic/picker.e2e.ts
@@ -26,10 +26,9 @@ configs().forEach(({ title, screenshot, config }) => {
     });
   });
 
-  test.describe(title('Test cancel buttons'), () => {
-    test('cancel', async ({ page }) => {
+  test.describe(title('Test cancel buttons'), () => {      
+    test('cancel button 1', async ({ page }) => {
       await page.goto('/src/components/picker/test/basic', config);
-
       await page.click('#basicMultipleCancelBtns');
       const optBtn1 = page.locator('ion-picker button.cancel1-btn');
       await optBtn1.click();
@@ -38,7 +37,10 @@ configs().forEach(({ title, screenshot, config }) => {
       const optBtn1AlertOkBtn = confirmOptBtn1Alert.locator('.alert-button-group button');
       expect(await optBtn1AlertInfo).toBe('cancel1-btn-clicked');
       await optBtn1AlertOkBtn.click();
+    });
 
+    test('cancel button 2', async ({ page }) => {
+      await page.goto('/src/components/picker/test/basic', config);
       await page.click('#basicMultipleCancelBtns');
       const optBtn2 = page.locator('ion-picker button.cancel2-btn');
       await optBtn2.click();
@@ -47,7 +49,10 @@ configs().forEach(({ title, screenshot, config }) => {
       const optBtn2AlertOkBtn = confirmOptBtn2Alert.locator('.alert-button-group button');
       expect(await optBtn2AlertInfo).toBe('cancel2-btn-clicked');
       await optBtn2AlertOkBtn.click();
+    });
 
+    test('cancel button 3', async ({ page }) => {
+      await page.goto('/src/components/picker/test/basic', config);
       await page.click('#basicMultipleCancelBtns');
       const ionPickerDidDismiss = await page.spyOnEvent('ionPickerDidDismiss');
       const optBtn3 = page.locator('ion-picker button.cancel3-btn');

From 621d6b2fb30fe060515d118ca98b1c17e94e1ab7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jose=CC=81=20Rio?= <jose.rio@hotmail.com>
Date: Tue, 12 Mar 2024 20:08:15 +0000
Subject: [PATCH 16/22] [fix](toast): Tests to ensure proper handler is
 triggered.

---
 .../components/toast/test/buttons/index.html  | 41 ++++++---
 .../toast/test/buttons/toast.e2e.ts           | 91 +++++++++++++++++++
 2 files changed, 121 insertions(+), 11 deletions(-)
 create mode 100644 core/src/components/toast/test/buttons/toast.e2e.ts

diff --git a/core/src/components/toast/test/buttons/index.html b/core/src/components/toast/test/buttons/index.html
index bf4f98f6923..7ca1d42073a 100644
--- a/core/src/components/toast/test/buttons/index.html
+++ b/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,7 +36,7 @@
           Multiple Buttons
         </ion-button>
 
-        <ion-button id="multipleButtons" expand="block" onclick="presentToastWithMultipleCancelButtons()">
+        <ion-button id="multipleCancelButtons" expand="block" onclick="presentToastWithMultipleCancelButtons()">
           Multiple Cancel Buttons
         </ion-button>
 
@@ -49,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?',
@@ -122,32 +129,44 @@
         return await presentToastWithOptions(opts);
       }
 
+      function confirmpAlertCancelBtns(expectedDataTestId) {
+        openAlert({
+          header: 'Alert',
+          subHeader: 'CancelBtnClicked',
+          message: expectedDataTestId,
+          buttons: ['OK'],
+          htmlAttributes: {
+            'data-testid': expectedDataTestId,
+          },
+        });
+      }
+
       async function presentToastWithMultipleCancelButtons() {
         const opts = {
           message: 'Warning.',
           buttons: [
             {
-              text: 'Cancel',
-              side: 'start',
+              text: 'C1',
               role: 'cancel',
+              cssClass: 'cancel1-btn',
               handler: () => {
-                console.log('Cancel btn');
+                confirmpAlertCancelBtns('cancel1-btn-clicked');
               },
             },
             {
-              text: 'Cancel1',
+              text: 'C2',
               role: 'cancel',
+              cssClass: 'cancel2-btn',
               handler: () => {
-                console.log('Cancel1 btn');
+                confirmpAlertCancelBtns('cancel2-btn-clicked');
               },
             },
             {
-              text: 'Cancel2',
+              text: 'C3',
               role: 'cancel',
-              handler: () => {
-                console.log('Cancel2 btn');
-              },
+              cssClass: 'cancel3-btn',
             },
+            'Cancel',
           ],
         };
 
diff --git a/core/src/components/toast/test/buttons/toast.e2e.ts b/core/src/components/toast/test/buttons/toast.e2e.ts
new file mode 100644
index 00000000000..aa1afb28c08
--- /dev/null
+++ b/core/src/components/toast/test/buttons/toast.e2e.ts
@@ -0,0 +1,91 @@
+import type { Locator } from '@playwright/test';
+import { expect } from '@playwright/test';
+import type { E2EPage, E2EPageOptions, ScreenshotFn, EventSpy } from '@utils/test/playwright';
+import { configs, test } from '@utils/test/playwright';
+
+class ToastFixture {
+  readonly page: E2EPage;
+
+  private ionToastDidPresent!: EventSpy;
+  private ionToastDidDismiss!: EventSpy;
+
+  constructor(page: E2EPage) {
+    this.page = page;
+  }
+
+  async goto(config: E2EPageOptions) {
+    const { page } = this;
+    await page.goto(`/src/components/toast/test/buttons`, config);
+    this.ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent');
+    this.ionToastDidDismiss = await page.spyOnEvent('ionToastDidDismiss');
+  }
+
+  async openToast(selector: string) {
+    const { page, ionToastDidPresent } = this;
+    const button = page.locator(selector);
+    await button.click();
+
+    await ionToastDidPresent.next();
+
+    return {
+      toast: page.locator('ion-toast'),
+      container: page.locator('ion-toast .toast-container'),
+    };
+  }
+
+  async screenshot(screenshotModifier: string, screenshot: ScreenshotFn, el?: Locator) {
+    const { page } = this;
+
+    const screenshotString = screenshot(`toast-${screenshotModifier}`);
+
+    if (el === undefined) {
+      await expect(page).toHaveScreenshot(screenshotString);
+    } else {
+      await expect(el).toHaveScreenshot(screenshotString);
+    }
+  }
+}
+
+configs().forEach(({ title, screenshot, config }) => {
+  test.describe(title('toast: position rendering'), () => {
+    let toastFixture: ToastFixture;
+
+    test.beforeEach(async ({ page }) => {
+      toastFixture = new ToastFixture(page);
+      await toastFixture.goto(config);
+    });
+    
+    test('cancel button 1', async ({ page }) => {
+      await toastFixture.openToast('#multipleCancelButtons');
+      const optBtn1 = page.locator('ion-toast 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 optBtn1AlertOkBtn.click();
+    });
+
+    test('cancel button 2', async ({ page }) => {
+      await toastFixture.openToast('#multipleCancelButtons');
+      const optBtn2 = page.locator('ion-toast 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 optBtn2AlertOkBtn.click();
+    });
+
+    test('cancel button 3', async ({ page }) => {
+      await toastFixture.openToast('#multipleCancelButtons');
+      const ionToastDidDismiss = await page.spyOnEvent('ionToastDidDismiss');
+      const optBtn3 = page.locator('ion-toast button.cancel3-btn');
+      await optBtn3.click();
+      await ionToastDidDismiss.next();
+      expect(ionToastDidDismiss).toHaveReceivedEventDetail({ data: { values: undefined }, role: 'cancel' });
+    });
+    
+  });
+  
+});
\ No newline at end of file

From f01cabe97f248672cdec4ee215f1b2d339d85513 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jose=CC=81=20Rio?= <jose.rio@hotmail.com>
Date: Wed, 13 Mar 2024 11:14:39 +0000
Subject: [PATCH 17/22] [fix](toast): Removed unused property.

---
 core/src/components/toast/test/buttons/toast.e2e.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/core/src/components/toast/test/buttons/toast.e2e.ts b/core/src/components/toast/test/buttons/toast.e2e.ts
index aa1afb28c08..c9d1b4b5fd9 100644
--- a/core/src/components/toast/test/buttons/toast.e2e.ts
+++ b/core/src/components/toast/test/buttons/toast.e2e.ts
@@ -7,7 +7,6 @@ class ToastFixture {
   readonly page: E2EPage;
 
   private ionToastDidPresent!: EventSpy;
-  private ionToastDidDismiss!: EventSpy;
 
   constructor(page: E2EPage) {
     this.page = page;
@@ -17,7 +16,6 @@ class ToastFixture {
     const { page } = this;
     await page.goto(`/src/components/toast/test/buttons`, config);
     this.ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent');
-    this.ionToastDidDismiss = await page.spyOnEvent('ionToastDidDismiss');
   }
 
   async openToast(selector: string) {

From b0910ed1987915433af2ee188dce482c922a21ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jose=CC=81=20Rio?= <jose.rio@hotmail.com>
Date: Wed, 13 Mar 2024 11:26:46 +0000
Subject: [PATCH 18/22] [fix](toast): Fixed test issues and add screenshots.

---
 core/src/components/toast/test/buttons/toast.e2e.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/core/src/components/toast/test/buttons/toast.e2e.ts b/core/src/components/toast/test/buttons/toast.e2e.ts
index c9d1b4b5fd9..27800ee9168 100644
--- a/core/src/components/toast/test/buttons/toast.e2e.ts
+++ b/core/src/components/toast/test/buttons/toast.e2e.ts
@@ -52,7 +52,7 @@ configs().forEach(({ title, screenshot, config }) => {
       toastFixture = new ToastFixture(page);
       await toastFixture.goto(config);
     });
-    
+
     test('cancel button 1', async ({ page }) => {
       await toastFixture.openToast('#multipleCancelButtons');
       const optBtn1 = page.locator('ion-toast button.cancel1-btn');
@@ -61,6 +61,7 @@ configs().forEach(({ title, screenshot, config }) => {
       const optBtn1AlertInfo = confirmOptBtn1Alert.locator('.alert-message').innerText();
       const optBtn1AlertOkBtn = confirmOptBtn1Alert.locator('.alert-button-group button');
       expect(await optBtn1AlertInfo).toBe('cancel1-btn-clicked');
+      await toastFixture.screenshot('cancelBtn1', screenshot);
       await optBtn1AlertOkBtn.click();
     });
 
@@ -72,6 +73,7 @@ configs().forEach(({ title, screenshot, config }) => {
       const optBtn2AlertInfo = confirmOptBtn2Alert.locator('.alert-message').innerText();
       const optBtn2AlertOkBtn = confirmOptBtn2Alert.locator('.alert-button-group button');
       expect(await optBtn2AlertInfo).toBe('cancel2-btn-clicked');
+      await toastFixture.screenshot('cancelBtn2', screenshot);
       await optBtn2AlertOkBtn.click();
     });
 
@@ -81,9 +83,7 @@ configs().forEach(({ title, screenshot, config }) => {
       const optBtn3 = page.locator('ion-toast button.cancel3-btn');
       await optBtn3.click();
       await ionToastDidDismiss.next();
-      expect(ionToastDidDismiss).toHaveReceivedEventDetail({ data: { values: undefined }, role: 'cancel' });
+      expect(ionToastDidDismiss).toHaveReceivedEventDetail({ data: undefined, role: 'cancel' });
     });
-    
   });
-  
-});
\ No newline at end of file
+});

From d05e653b2391a74506a4eebd22fb50be3f91d2b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jose=CC=81=20Rio?= <jose.rio@hotmail.com>
Date: Wed, 13 Mar 2024 11:39:26 +0000
Subject: [PATCH 19/22] [fix](alert): Added screenshot test.

---
 core/src/components/alert/test/basic/alert.e2e.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/core/src/components/alert/test/basic/alert.e2e.ts b/core/src/components/alert/test/basic/alert.e2e.ts
index e47c4985c67..f9664109ef8 100644
--- a/core/src/components/alert/test/basic/alert.e2e.ts
+++ b/core/src/components/alert/test/basic/alert.e2e.ts
@@ -152,6 +152,7 @@ configs().forEach(({ config, screenshot, title }) => {
       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();
     });
 
@@ -163,6 +164,7 @@ configs().forEach(({ config, screenshot, title }) => {
       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();
     });
 

From 6ce83c496acad812858e8e2725edffb3a845303e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jose=CC=81=20Rio?= <jose.rio@hotmail.com>
Date: Wed, 13 Mar 2024 11:39:37 +0000
Subject: [PATCH 20/22] [fix](picker): Added screenshot test.

---
 core/src/components/picker/test/basic/picker.e2e.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/core/src/components/picker/test/basic/picker.e2e.ts b/core/src/components/picker/test/basic/picker.e2e.ts
index 2e6ee24ed91..a984eb17d42 100644
--- a/core/src/components/picker/test/basic/picker.e2e.ts
+++ b/core/src/components/picker/test/basic/picker.e2e.ts
@@ -26,7 +26,7 @@ configs().forEach(({ title, screenshot, config }) => {
     });
   });
 
-  test.describe(title('Test cancel buttons'), () => {      
+  test.describe(title('Test cancel buttons'), () => {
     test('cancel button 1', async ({ page }) => {
       await page.goto('/src/components/picker/test/basic', config);
       await page.click('#basicMultipleCancelBtns');
@@ -36,6 +36,7 @@ configs().forEach(({ title, screenshot, config }) => {
       const optBtn1AlertInfo = confirmOptBtn1Alert.locator('.alert-message').innerText();
       const optBtn1AlertOkBtn = confirmOptBtn1Alert.locator('.alert-button-group button');
       expect(await optBtn1AlertInfo).toBe('cancel1-btn-clicked');
+      await expect(page).toHaveScreenshot(screenshot(`pickerCancelBtn1`));
       await optBtn1AlertOkBtn.click();
     });
 
@@ -48,6 +49,7 @@ configs().forEach(({ title, screenshot, config }) => {
       const optBtn2AlertInfo = confirmOptBtn2Alert.locator('.alert-message').innerText();
       const optBtn2AlertOkBtn = confirmOptBtn2Alert.locator('.alert-button-group button');
       expect(await optBtn2AlertInfo).toBe('cancel2-btn-clicked');
+      await expect(page).toHaveScreenshot(screenshot(`pickerCancelBtn2`));
       await optBtn2AlertOkBtn.click();
     });
 

From bbd9cda1885fb063b0067e03a9be875ff9989de3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jose=CC=81=20Rio?= <jose.rio@hotmail.com>
Date: Wed, 13 Mar 2024 11:40:15 +0000
Subject: [PATCH 21/22] [fix](toast): Fixed screenshot and test names.

---
 core/src/components/toast/test/buttons/toast.e2e.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/core/src/components/toast/test/buttons/toast.e2e.ts b/core/src/components/toast/test/buttons/toast.e2e.ts
index 27800ee9168..bc6ce55b112 100644
--- a/core/src/components/toast/test/buttons/toast.e2e.ts
+++ b/core/src/components/toast/test/buttons/toast.e2e.ts
@@ -45,7 +45,7 @@ class ToastFixture {
 }
 
 configs().forEach(({ title, screenshot, config }) => {
-  test.describe(title('toast: position rendering'), () => {
+  test.describe(title('Test cancel buttons'), () => {
     let toastFixture: ToastFixture;
 
     test.beforeEach(async ({ page }) => {
@@ -61,7 +61,7 @@ configs().forEach(({ title, screenshot, config }) => {
       const optBtn1AlertInfo = confirmOptBtn1Alert.locator('.alert-message').innerText();
       const optBtn1AlertOkBtn = confirmOptBtn1Alert.locator('.alert-button-group button');
       expect(await optBtn1AlertInfo).toBe('cancel1-btn-clicked');
-      await toastFixture.screenshot('cancelBtn1', screenshot);
+      await toastFixture.screenshot('toastCancelBtn1', screenshot);
       await optBtn1AlertOkBtn.click();
     });
 
@@ -73,7 +73,7 @@ configs().forEach(({ title, screenshot, config }) => {
       const optBtn2AlertInfo = confirmOptBtn2Alert.locator('.alert-message').innerText();
       const optBtn2AlertOkBtn = confirmOptBtn2Alert.locator('.alert-button-group button');
       expect(await optBtn2AlertInfo).toBe('cancel2-btn-clicked');
-      await toastFixture.screenshot('cancelBtn2', screenshot);
+      await toastFixture.screenshot('toastCancelBtn2', screenshot);
       await optBtn2AlertOkBtn.click();
     });
 

From 91b5b8b3bb82da20fd0cfed373c478809f01e12d Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Thu, 14 Mar 2024 13:27:57 -0400
Subject: [PATCH 22/22] test(picker): cancel button handler is called

---
 .../components/alert/test/basic/index.html    |  6 +-
 .../components/picker/test/basic/index.html   | 87 ++++--------------
 .../picker/test/basic/picker.e2e.ts           | 88 ++++++++++---------
 .../components/toast/test/buttons/index.html  |  6 +-
 4 files changed, 67 insertions(+), 120 deletions(-)

diff --git a/core/src/components/alert/test/basic/index.html b/core/src/components/alert/test/basic/index.html
index d3d7c5ada32..9fd07b39f05 100644
--- a/core/src/components/alert/test/basic/index.html
+++ b/core/src/components/alert/test/basic/index.html
@@ -118,7 +118,7 @@
         });
       }
 
-      function confirmpAlertCancelBtns(expectedDataTestId) {
+      function confirmAlertCancelBtns(expectedDataTestId) {
         openAlert({
           header: 'Alert',
           subHeader: 'CancelBtnClicked',
@@ -141,7 +141,7 @@
               role: 'cancel',
               cssClass: 'cancel1-btn',
               handler: () => {
-                confirmpAlertCancelBtns('cancel1-btn-clicked');
+                confirmAlertCancelBtns('cancel1-btn-clicked');
               },
             },
             {
@@ -149,7 +149,7 @@
               role: 'cancel',
               cssClass: 'cancel2-btn',
               handler: () => {
-                confirmpAlertCancelBtns('cancel2-btn-clicked');
+                confirmAlertCancelBtns('cancel2-btn-clicked');
               },
             },
             {
diff --git a/core/src/components/picker/test/basic/index.html b/core/src/components/picker/test/basic/index.html
index fcb107be57b..bf88763140c 100644
--- a/core/src/components/picker/test/basic/index.html
+++ b/core/src/components/picker/test/basic/index.html
@@ -14,8 +14,7 @@
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
   </head>
   <script type="module">
-    import { alertController, pickerController } from '../../../../dist/ionic/index.esm.js';
-    window.alertController = alertController;
+    import { pickerController } from '../../../../dist/ionic/index.esm.js';
     window.pickerController = pickerController;
   </script>
 
@@ -23,9 +22,6 @@
     <ion-app>
       <ion-content class="ion-padding">
         <ion-button id="basic" expand="block" onclick="presentPicker()">Show Picker</ion-button>
-        <ion-button id="basicMultipleCancelBtns" expand="block" onclick="presentPicker('', false)"
-          >Show Picker w/ Multiple Cancel btns</ion-button
-        >
         <ion-button id="custom" expand="block" onclick="presentPicker('my-custom-class')"
           >Show Custom Picker</ion-button
         >
@@ -48,11 +44,6 @@
     </style>
 
     <script>
-      async function openAlert(opts) {
-        const alert = await alertController.create(opts);
-        await alert.present();
-      }
-
       selectedIndex = 0;
 
       const options = [
@@ -106,70 +97,22 @@
         },
       ];
 
-      function confirmpAlertCancelBtns(expectedDataTestId) {
-        openAlert({
-          header: 'Alert',
-          subHeader: 'CancelBtnClicked',
-          message: expectedDataTestId,
-          buttons: ['OK'],
-          htmlAttributes: {
-            'data-testid': expectedDataTestId,
-          },
-        });
-      }
-
-      const btns = {
-        basic: [
-          {
-            text: 'Cancel',
-            role: 'cancel',
-          },
-          {
-            text: 'Save',
-            cssClass: 'save-btn',
-            handler: (ev) => {
-              const v = ev.hours.value;
-              selectedIndex = options.findIndex((opt) => opt.value === v);
-            },
-          },
-        ],
-
-        multipleCancelBtns: [
-          {
-            text: 'Cancel 1',
-            role: 'cancel',
-            cssClass: 'cancel1-btn',
-            handler: () => {
-              confirmpAlertCancelBtns('cancel1-btn-clicked');
-            },
-          },
-          {
-            text: 'Cancel 2',
-            role: 'cancel',
-            cssClass: 'cancel2-btn',
-            handler: () => {
-              confirmpAlertCancelBtns('cancel2-btn-clicked');
+      async function presentPicker(customClass) {
+        const pickerElement = await pickerController.create({
+          buttons: [
+            {
+              text: 'Cancel',
+              role: 'cancel',
             },
-          },
-          {
-            text: 'Cancel 3',
-            role: 'cancel',
-            cssClass: 'cancel3-btn',
-          },
-          {
-            text: 'Save',
-            cssClass: 'save-btn',
-            handler: (ev) => {
-              const v = ev.hours.value;
-              selectedIndex = options.findIndex((opt) => opt.value === v);
+            {
+              text: 'Save',
+              cssClass: 'save-btn',
+              handler: (ev) => {
+                const v = ev.hours.value;
+                selectedIndex = options.findIndex((opt) => opt.value === v);
+              },
             },
-          },
-        ],
-      };
-
-      async function presentPicker(customClass, isBasic = true) {
-        const pickerElement = await pickerController.create({
-          buttons: isBasic ? btns.basic : btns.multipleCancelBtns,
+          ],
           columns: [
             {
               name: 'hours',
diff --git a/core/src/components/picker/test/basic/picker.e2e.ts b/core/src/components/picker/test/basic/picker.e2e.ts
index a984eb17d42..62c982d650f 100644
--- a/core/src/components/picker/test/basic/picker.e2e.ts
+++ b/core/src/components/picker/test/basic/picker.e2e.ts
@@ -25,51 +25,55 @@ configs().forEach(({ title, screenshot, config }) => {
       await expect(page).toHaveScreenshot(screenshot(`picker-value-selected`));
     });
   });
+});
 
-  test.describe(title('Test cancel buttons'), () => {
-    test('cancel button 1', async ({ page }) => {
-      await page.goto('/src/components/picker/test/basic', config);
-      await page.click('#basicMultipleCancelBtns');
-      const optBtn1 = page.locator('ion-picker 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 expect(page).toHaveScreenshot(screenshot(`pickerCancelBtn1`));
-      await optBtn1AlertOkBtn.click();
-    });
+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>
 
-    test('cancel button 2', async ({ page }) => {
-      await page.goto('/src/components/picker/test/basic', config);
-      await page.click('#basicMultipleCancelBtns');
-      const optBtn2 = page.locator('ion-picker 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 expect(page).toHaveScreenshot(screenshot(`pickerCancelBtn2`));
-      await optBtn2AlertOkBtn.click();
-    });
+      <button id="open" onclick="openPicker()">Open Picker</button>
 
-    test('cancel button 3', async ({ page }) => {
-      await page.goto('/src/components/picker/test/basic', config);
-      await page.click('#basicMultipleCancelBtns');
-      const ionPickerDidDismiss = await page.spyOnEvent('ionPickerDidDismiss');
-      const optBtn3 = page.locator('ion-picker button.cancel3-btn');
-      await optBtn3.click();
-      await ionPickerDidDismiss.next();
-      expect(ionPickerDidDismiss).toHaveReceivedEventDetail({
-        data: {
-          hours: {
-            text: '1',
-            value: '01',
-            columnIndex: 0,
-          },
-        },
-        role: 'cancel',
-      });
+      <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');
     });
   });
 });
diff --git a/core/src/components/toast/test/buttons/index.html b/core/src/components/toast/test/buttons/index.html
index 7ca1d42073a..397dc6a340e 100644
--- a/core/src/components/toast/test/buttons/index.html
+++ b/core/src/components/toast/test/buttons/index.html
@@ -129,7 +129,7 @@
         return await presentToastWithOptions(opts);
       }
 
-      function confirmpAlertCancelBtns(expectedDataTestId) {
+      function confirmAlertCancelBtns(expectedDataTestId) {
         openAlert({
           header: 'Alert',
           subHeader: 'CancelBtnClicked',
@@ -150,7 +150,7 @@
               role: 'cancel',
               cssClass: 'cancel1-btn',
               handler: () => {
-                confirmpAlertCancelBtns('cancel1-btn-clicked');
+                confirmAlertCancelBtns('cancel1-btn-clicked');
               },
             },
             {
@@ -158,7 +158,7 @@
               role: 'cancel',
               cssClass: 'cancel2-btn',
               handler: () => {
-                confirmpAlertCancelBtns('cancel2-btn-clicked');
+                confirmAlertCancelBtns('cancel2-btn-clicked');
               },
             },
             {