Popover positioned in the center of screen, not near the button activated

In my ionic 5 vue App
popover position in the center of screen, not near the button activated
Im using the code from the doc as below

  <ion-button @click="setOpen(true, $event)">Show Popover</ion-button>

What does your setOpen code look like?

setup() {
    const isOpenRef = ref(false);
    // const event = ref(); I removed this line
    function setOpen (state)  {
      //event.value = event;   I removed this line
      isOpenRef.value = state;
    return { isOpenRef, setOpen}

same as doc, but removed event

Since you are not setting the event in setOpen, ion-popover does not have access to that event for positioning, so it will place the popover in the middle of the screen by default.

actually I had used event also, but it did not, work, the reason is
the const event =ref() and open = (state, event) is having same variable name

if we change the param name event to evt or something it will work

setup() {

    const popoverstate = ref(false);
    const event = ref();
    const open = (state, evt) => { // param event changed to evt
      popoverstate.value = state;
      event.value = evt;

    return { popoverstate, open, event };

request you to update in the doc as well to avoid confusion

Good catch! I will fix this in the docs.

1 Like