I'm facing an issue with displaying an information popover within a modal. The popover is not appearing in the correct location, even when I pass the event to the popoverController.
Is there a way to make the popover appear just under the information button?
Here's the code snippet from the modal where I call the popover:
const popoverElement = Object.assign(document.createElement('ion-popover'), {
component: 'info-popover',
event: event,
});
document.body.appendChild(popoverElement);
return await popoverElement.present();
Screenshot of the Popover above:
UPDATE
This is how the DOM structure looks like: The modal is attached to body > app-root > ion-app, while the popover is just attached to body.
UPDATE 2
Disabling the shadow DOM in Stencil can potentially resolve this issue, although I would prefer not to do that.
@Component({
tag: "component",
styleUrl: "component.css",
shadow: false
})