Ion-popover with background clickable

Ionic Framework
1

Hi there !

I was facing a problem, using ion-popover when i used it as a notification component. When the popover was showing the notification, the user had a delay without any focus and click event on the whole page. The behavior I was seeking for is the user can still click on any element in the background during popover display.

So, after so pain and tests, I share the code for anyone who want to achieve the same behavior.

Tested with Ionic 8 + Vue 3

Full example here : https://codesandbox.io/p/devbox/ztvy68

<ion-button id="custom-popover-trigger">Background clickable popover</ion-button>
<ion-popover
    class="custom-popover"
    :show-backdrop="false"
    :backdrop-dismiss="false"
    trigger="custom-popover-trigger"
    :dismiss-on-select="true"
>
  <ion-content>Hi there !</ion-content>
</ion-popover>

/* Trick to keep background focus */
ion-popover.custom-popover{
  position: unset;
  &::part(backdrop) {
    display: none;
    pointer-events: none;
  }
}
1 Like
2

Setting :show-backdrop="false" & :backdrop-dismiss="false",
& Apply custom CSS to hide the backdrop & allow pointer events to pass through, you have effectively enabled interaction with underlying elements.

For those working with Angular, a similar approach can be adopted. When using the PopoverController

const popover = await this.popoverController.create
({
  component: YourComponent,
  showBackdrop: false,
  backdropDismiss: false,
  cssClass: 'custom-popover',
});
await popover.present();

in global stylesheet:

ion-popover.custom-popover::part(backdrop) 
{
  display: none;
  pointer-events: none;
}

This configuration ensures that the popover does not obstruct interactions with the background elements.

Good Luck..

3

Thanks for sharing this, it’s super helpful. I ran into the same issue recently and wasn’t getting anywhere with the default config. The position: unset and pointer-events: none trick is a nice touch. Appreciate the full example too, that really clears things up.