fix(popover): use composed path for trigger element target (#24531)

[mixalbl4-127]

Pull request checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been reviewed and added / updated if needed (for bug fixes / features)
• Build (npm run build) was run locally and any changes were pushed
• Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Please check the type of change your PR introduces:

• Bugfix
• Feature
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes
• Other (please describe):

What is the current behavior?

Issue Number: #24531, #24415

What is the new behavior?

Does this introduce a breaking change?

• Yes
• No

Other information

[liamdebeasi]

Thanks for making this PR! I added a small comment, but this is looking great otherwise. Could we also add a visual regression test? You should be able to use a test in https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/datetime/test/basic/e2e.ts as a basis for the new one. We would probably want to a test that opens datetime in a popover, opens the time picker, and takes a screenshot. That way if the positioning ever regresses we can catch it.

[liamdebeasi]

Rather than hack the MouseEvent type, It might make more sense to use CustomEvent since it has detail built in.

Suggested change

	async present(event?: MouseEvent | TouchEvent | PointerEvent | Omit<MouseEvent, 'detail'> & { detail: { ionShadowTarget: EventTarget | null; } }): Promise<void> {
	async present(event?: MouseEvent | TouchEvent | PointerEvent | CustomEvent): Promise<void> {

And then in your datetime.tsx, you can do something like:

const customEvent = new CustomEvent('ionShadowTarget', { detail: { ionShadowTarget: ev.target }});
popoverRef.present(customEvent);

Maybe not the most elegant, but ionShadowTarget is a private API, so we can easily change this if needed.

[mixalbl4-127]

if I uderstand correct, screenshoots are locate in remote server https://screenshot.ionicframework.com/ and I cant push new screenshoot here.
No faq like "how to upload new screenshoot for new test" here https://ionicframework.com/docs/contributing/how-to-contribute#screenshot-tests

A lot of fail tests now:

[sean-perkins]

if I uderstand correct, screenshoots are locate in remote server https://screenshot.ionicframework.com/ and I cant push new screenshoot here. No faq like "how to upload new screenshoot for new test" here https://ionicframework.com/docs/contributing/how-to-contribute#screenshot-tests

A lot of fail tests now:

Hello @mixalbl4-127,

You can see an example of what a screenshot test would look like here: https://github.com/ionic-team/ionic-framework/pull/24616/files#diff-46e1092227a42bc4ac87aadc41a0972deca18562fbb5b4d69b906a96f72e79a8R1. While screenshots are hosted, new tests will upload the new screenshot diffs when they are ran through CI.

I would like to close this PR in favor of #24616. I'd like to give you co-author credit (I'll update the commit signature soon). Your patch was extremely helpful and also uncovered another issue with the popover and pickers, that should be patched together.

Let me know if you have any issues with closing this PR.

[sean-perkins]

Closing this PR now that the other PR is merged. Thank you so much for getting the work started here 👍