From 70d278414eb5124d17c5ffaba5231c6bfd285656 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Mon, 25 Apr 2022 21:35:41 -0400
Subject: [PATCH] fix(select): avoid duplicate dialogs and backdrops when
 clicking (#25175)

Resolves #25126
---
 core/src/components/select/select.tsx         |  2 +-
 .../select/test/basic/select.e2e.ts           | 31 +++++++++++++++++++
 2 files changed, 32 insertions(+), 1 deletion(-)
 create mode 100644 core/src/components/select/test/basic/select.e2e.ts

diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx
index 80421b9490..bf8b148e87 100644
--- a/core/src/components/select/select.tsx
+++ b/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;
diff --git a/core/src/components/select/test/basic/select.e2e.ts b/core/src/components/select/test/basic/select.e2e.ts
new file mode 100644
index 0000000000..f774cd8860
--- /dev/null
+++ b/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);
+  });
+});