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

@@ -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();
   }
 };

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();
+  });
+});