From 408457aa95843cbf9fae7ce52d0f9de5e3362060 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 28 Mar 2023 11:09:42 -0400
Subject: [PATCH] fix(select): alert header defaults to label (#27034)

resolves #27028
---
 core/src/components/select/select.tsx         | 19 ++++++++++++++--
 .../select/test/label/select.e2e.ts           | 22 +++++++++++++++++++
 2 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx
index 3f95864c73..740eaf147b 100644
--- a/core/src/components/select/select.tsx
+++ b/core/src/components/select/select.tsx
@@ -562,8 +562,22 @@ export class Select implements ComponentInterface {
   }
 
   private async openAlert() {
-    const label = this.getLabel();
-    const labelText = label ? label.textContent : null;
+    /**
+     * TODO FW-3194
+     * Remove legacyFormController logic.
+     * Remove label and labelText vars
+     * Pass `this.label` instead of `labelText`
+     * when setting the header.
+     */
+    let label: HTMLElement | null;
+    let labelText: string | null | undefined;
+
+    if (this.legacyFormController.hasLegacyControl()) {
+      label = this.getLabel();
+      labelText = label ? label.textContent : null;
+    } else {
+      labelText = this.label;
+    }
 
     const interfaceOptions = this.interfaceOptions;
     const inputType = this.multiple ? 'checkbox' : 'radio';
@@ -622,6 +636,7 @@ export class Select implements ComponentInterface {
     return this.overlay.dismiss();
   }
 
+  // TODO FW-3194 Remove this
   private getLabel() {
     return findItemLabel(this.el);
   }
diff --git a/core/src/components/select/test/label/select.e2e.ts b/core/src/components/select/test/label/select.e2e.ts
index ccb86a2d77..465a29271e 100644
--- a/core/src/components/select/test/label/select.e2e.ts
+++ b/core/src/components/select/test/label/select.e2e.ts
@@ -248,3 +248,25 @@ test.describe('select: label', () => {
     });
   });
 });
+
+test.describe('select: alert label', () => {
+  test('should use the label to set the default header in an alert', async ({ page, skip }) => {
+    skip.rtl();
+    skip.mode('md');
+
+    await page.setContent(`
+      <ion-select label="My Alert" interface="alert">
+        <ion-select-option value="a">A</ion-select-option>
+      </ion-select>
+    `);
+
+    const select = page.locator('ion-select');
+    const alert = page.locator('ion-alert');
+    const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
+
+    await select.click();
+    await ionAlertDidPresent.next();
+
+    await expect(alert.locator('.alert-title')).toHaveText('My Alert');
+  });
+});