fix(overlays): do not return focus if application has already moved focus manually

[aeharding]

Issue number: resolves #28849

---

What is the current behavior?

If the developer tries to set focus to a custom element on overlay dismissal, Ionic will always override that focus.

What is the new behavior?

• If focus is already set by developer during dismissal, then Ionic will not restore focus to previous element

Does this introduce a breaking change?

• Yes
• No

Other information

In the before video, you can see the text box is focused by developer code when "Mention User" is tapped, which opens the keyboard. Shortly after that, when the bottom sheet fully dismisses, Ionic focuses the button, removing focus from the text box and hiding the keyboard.

In the after, Ionic detects that the developer has already focused the text box and does not change that focus.

Before	After
RPReplay_Final1705547611.MP4	RPReplay_Final1705547768.MP4

[liamdebeasi]

Overall looks good! A few changes for tests and maintainability.

[liamdebeasi]

We'll need a test for this. Something like the following should suffice:

test('should not return focus to another element if focus already manually returned', async ({
  page,
  skip,
}, testInfo) => {
  skip.browser(
    'webkit',
    'WebKit does not consider buttons to be focusable, so this test always passes since the input is the only focusable element.'
  );
  testInfo.annotations.push({
    type: 'issue',
    description: 'https://github.com/ionic-team/ionic-framework/issues/28849',
  });
  await page.setContent(
    `
    <button id="open-action-sheet">open</button>
    <ion-action-sheet trigger="open-action-sheet"></ion-action-sheet>
    <input id="test-input" />

    <script>
      const actionSheet = document.querySelector('ion-action-sheet');

      actionSheet.addEventListener('ionActionSheetWillDismiss', () => {
        requestAnimationFrame(() => {
          document.querySelector('#test-input').focus();
        });
      });
    </script>
  `,
    config
  );

  const ionActionSheetDidPresent = await page.spyOnEvent('ionActionSheetDidPresent');
  const actionSheet = page.locator('ion-action-sheet');
  const input = page.locator('#test-input');
  const trigger = page.locator('#open-action-sheet');

  // present action sheet
  await trigger.click();
  await ionActionSheetDidPresent.next();

  // dismiss action sheet
  await actionSheet.evaluate((el: HTMLIonActionSheetElement) => el.dismiss());

  // verify focus is in correct location
  await expect(input).toBeFocused();
});

You can put this in src/utils/test/overlays/overlays.e2e.ts

[aeharding]

Done thanks!

[liamdebeasi]

Can we also add a comment that explains focus is always moved to the body when the overlay is dismissed? Maintainers may not know why we specifically check the body here.

[aeharding]

I added some MDN references. Apologies if its now a bit too wordy, feel free to make further suggestions!

[liamdebeasi]

Thank you!