Setting Popover Position after a Delayed Promise Resolution

Ionic Framework ionic-v3
1

I’m having trouble getting the popover at the right place after a delayed Promise resolution.

My code is below, which is hooked with a click event of a button. The popover popped up at the right position if I use a cached/immediately resolving Promise (e.g. using the commented-out code below).
If the promise takes some time to resolve (which actually talks to network to get things), then the popover shows up at the top-left corner, sometimes. Yeah, most of the time, but not all the time. Occasionally it’s at the right place. It seems it depends on how fast the promise resolves, but I have no data to support my guess.

My guess is that the event object I passed to present(), which in turn is called in a Promise.then, is no longer valid when the call is actually happening. I’m planning to take a look at what the event is like and make a deep copy of that. But somehow I feel that’s not the right way.

Do you guys have seen this and have a workaround?

My code:

  popupDetails(event: Event) {
    Promise
        .all([
          this.apiClient.getCurrentUser(), // It pops up at the top-left corner no matter where the button is.
          // Promise.resolve({"email": "abc@def"}), // It pops up at the right place.
        ])
        .then(values => {
          this.popoverController
              .create(UserDetailsComponent, {
                userInfo: values[0],
              })
              .present({ev: event});
        })
        .catch(error => {
          Constants.log(`Error occurred when requesting user info: ${error}`);
        });
  }

My ionic info outputs:

    @ionic/cli-utils  : 1.9.2
    ionic (Ionic CLI) : 3.9.2

global packages:

    Cordova CLI : 7.0.1 

local packages:

    @ionic/app-scripts : 2.1.3
    Cordova Platforms  : ios 4.4.0
    Ionic Framework    : ionic-angular 3.6.0