fix(select): avoid duplicate dialogs and backdrops when clicking (#25175)

Resolves #25126

Author: sean-perkins

core/src/components/select/select.tsx

@@ -188,8 +188,8 @@ export class Select implements ComponentInterface {
     if (this.disabled || this.isExpanded) {
       return undefined;
     }
-    const overlay = (this.overlay = await this.createOverlay(event));
     this.isExpanded = true;
+    const overlay = (this.overlay = await this.createOverlay(event));
     overlay.onDidDismiss().then(() => {
       this.overlay = undefined;
       this.isExpanded = false;

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

@@ -0,0 +1,31 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('select: basic', () => {
+  test('should not open multiple alert windows when clicked multiple times', async ({ page }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/ionic-team/ionic-framework/issues/25126',
+    });
+
+    await page.goto('/src/components/select/test/basic');
+
+    const select = page.locator('#gender');
+
+    await select.evaluate((el: HTMLSelectElement) => {
+      /*
+       * Playwright's click() method attempts to scroll to the handle
+       * to perform the action. That is problematic when the overlay
+       * is already visible. We manually click() the element instead
+       * to avoid flaky tests.
+       */
+      el.click();
+      el.click();
+      el.click();
+    });
+
+    const alerts = await page.$$('ion-alert');
+
+    expect(alerts.length).toBe(1);
+  });
+});