javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 00:27:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(popover): account for ionShadowTarget elements (#23436)

Browse Source
This commit is contained in:
Liam DeBeasi
2021-06-08 16:04:43 -04:00
committed by GitHub
parent 8dbe8ba7bc
commit 0e38d42761
1 changed files with 17 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
core/src/components/popover/utils.ts
View File

@ -416,7 +416,7 @@ export const getPopoverPosition = (
align: PositionAlign,
defaultPosition: PopoverPosition,
triggerEl?: HTMLElement,
event?: MouseEvent,
event?: MouseEvent | CustomEvent,
): PopoverPosition => {
let referenceCoordinates = {
top: 0,
@ -436,9 +436,11 @@ export const getPopoverPosition = (
return defaultPosition;
}
const mouseEv = event as MouseEvent;
referenceCoordinates = {
top: event.clientY,
left: event.clientX,
top: mouseEv.clientY,
left: mouseEv.clientX,
width: 1,
height: 1
}
@ -454,7 +456,18 @@ export const getPopoverPosition = (
*/
case 'trigger':
default:
const actualTriggerEl = (triggerEl || event?.target) as HTMLElement | null;
const customEv = event as CustomEvent;
/**
* ionShadowTarget is used when we need to align the
* popover with an element inside of the shadow root
* of an Ionic component. Ex: Presenting a popover
* by clicking on the collapsed indicator inside
* of `ion-breadcrumb` and centering it relative
* to the indicator rather than `ion-breadcrumb`
* as a whole.
*/
const actualTriggerEl = (triggerEl || customEv?.detail?.ionShadowTarget || customEv?.target) as HTMLElement | null;
if (!actualTriggerEl) {
return defaultPosition;
}