Ionic 6: Popovers all Now Missing Arrows

Ionic Framework
1 
 async presentPopover(ev: any) {
    const popover = await this.popoverController.create({
      component: PopoverComponent,
      event: ev,
      mode: 'ios',
      translucent: true
    });
    return await popover.present();
  }


<button style="margin:100px; padding: 10px:" (click)="presentPopover($event)">POP</button>

In a pristine Tabs app just created, the arrow does not appear on the popover. It used to, with version 5.

missing-arrow
missing-arrow1598×1578 191 KB

1 Like
2

The documentation says:

If true , the popover will display an arrow that points at the reference when running in ios mode on mobile. Does not apply in md mode or on desktop.

Does the arrow show up if you emulate iOS?

3

Yes, thanks. It appears in emulation of iOS, but in the past, if you passed the mode:‘ios’ configuration, it worked as well, in web apps. The documentation for ionic has been terrible, for at least the last 5 years that I’ve been using it. The behavior has changed from v5 to v6, with no change in the documentation.

4

Gotcha. I would think it should work if mode:ios as well. Maybe a bug?

5

Just got a message from ionic, that it is a bug, and is being worked on:

Also, I re-read your message and tried the arrow:true. It isn’t allowed in the type definitions, so I used a @ts-ignore, but no luck. Not sure whether that is a bug in the docs or the type declarations.

Thanks for your help!