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

Ionic Framework Ionic Vue
1

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

image
image427×692 8.75 KB 

<template>
  <ion-button @click="setOpen(true, $event)">Show Popover</ion-button>
  <ion-popover
    :is-open="isOpenRef"
    css-class="my-custom-class"
    :event="event"
    :translucent="true"
    @didDismiss="setOpen(false)"
  >
    <Popover></Popover>
  </ion-popover>
</template>
2

What does your setOpen code look like?

3 
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

4

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.

5

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

6

Good catch! I will fix this in the docs.

2 Likes