From dcc2da2800e69d938b4a62db436d9f07d9663dce Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Thu, 16 Jun 2022 10:04:11 -0400
Subject: [PATCH] fix(overlays): focus is not moved if active element is in
 overlay (#25481)

resolves #24127, resolves #24820

Co-authored-by: MarkChrisLevy <MarkChrisLevy@users.noreply.github.com>
---
 core/src/utils/overlays.ts                   |  8 +++++-
 core/src/utils/test/overlays/overlays.e2e.ts | 29 ++++++++++++++++++++
 2 files changed, 36 insertions(+), 1 deletion(-)
 create mode 100644 core/src/utils/test/overlays/overlays.e2e.ts

diff --git a/core/src/utils/overlays.ts b/core/src/utils/overlays.ts
index 60da898cfe..48be57b788 100644
--- a/core/src/utils/overlays.ts
+++ b/core/src/utils/overlays.ts
@@ -430,7 +430,13 @@ export const present = async (
     focusPreviousElementOnDismiss(overlay.el);
   }
 
-  if (overlay.keyboardClose) {
+  /**
+   * If the focused element is already
+   * inside the overlay component then
+   * focus should not be moved from that
+   * to the overlay container.
+   */
+  if (overlay.keyboardClose && (document.activeElement === null || !overlay.el.contains(document.activeElement))) {
     overlay.el.focus();
   }
 };
diff --git a/core/src/utils/test/overlays/overlays.e2e.ts b/core/src/utils/test/overlays/overlays.e2e.ts
new file mode 100644
index 0000000000..a6eefce4c2
--- /dev/null
+++ b/core/src/utils/test/overlays/overlays.e2e.ts
@@ -0,0 +1,29 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('overlays: focus', () => {
+  test('should not focus the overlay container if element inside of overlay is focused', async ({ page }, testInfo) => {
+    test.skip(testInfo.project.metadata.rtl === true, 'RTL tests are not needed as layout is not checked');
+
+    await page.setContent(`
+      <ion-button id="open-modal">Show Modal</ion-button>
+      <ion-modal trigger="open-modal">
+        <ion-content>
+          <ion-input autofocus="true"></ion-input>
+        </ion-content>
+      </ion-modal>
+    `);
+
+    const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+    const button = page.locator('ion-button');
+    const input = page.locator('ion-input');
+
+    await button.click();
+    await input.evaluate((el: HTMLIonInputElement) => el.setFocus());
+
+    await ionModalDidPresent.next();
+    await page.waitForChanges();
+
+    expect(page.locator('ion-input input')).toBeFocused();
+  });
+});