如果弹出框处于活动状态，则不会显示Ionic2警报

Question

I have a list where the user can call a popover from an list item. Inside the popover, when a option is selected, a confirmation alert should be created.

The problem is when I try to call the alert when the popover is open, it does not show correctly. It appears to be behind the list and the list becomes unresponsive (can´t accept clicks anymore)...

For testing proposes if I add the alert directly from a click on the item, instead of the option selected from the popover, the alert appears correctly.

On the page where the list and the popover are created:

public OnItemOptionsPress(event, item)
  {
        event.stopPropagation();

        let popoverOptions =
        [
              { 
                    Resource: "Remove",  
                    Icon: "icon-trash",               
                    Callback: (event, item) => 
                    { 
                          this.confirmRemoveItem(event, item) 
                    },
              }
        ];

        let popover = this.PopoverController.create
        (
              PopoverOptions, 
              { 
                    Owner: item, 
                    Items: this.popoverOptions 
              }
        );

        popover.present({ ev:event });
  }

  public confirmRemoveItem(event, item)
  {
        let alert = this.AlertController.create
        (
              {
                    title: 'Remove Item',
                    message: 'Do you want to remove?',
                    buttons: 
                    [
                          {
                                text: 'No',
                                role: 'cancel',
                                handler: () => 
                                {
                                      console.log('No has been clicked');
                                }
                          },
                          {
                                text: 'Yes',
                                handler: () => 
                                {
                                      console.log('yes has been clicked');

                                      this.removeItem(item);
                                }
                          }
                    ]
              }
        );

        alert.present();
  }

  public removeItem(item)
  {
        this.items.splice(item.Index, 1);
  }

Inside the popover when an option is selected and the close function is called:

  public close(event, item) 
  {
        if (item.Callback) item.Callback(event, this.Owner);

        this.ViewController.dismiss();
  }

Answer 1

I noticed the dismiss() method is returning a promise. I had to add a delay when dismissing the popover and calling the callback async.

  public close(event, item:PopoverItemModel) 
  {    
        let animation = this.ViewController.dismiss();

        animation.then(()=>
        {
               if (item.Callback) item.Callback(this.Owner);
        });

        //if (item.Callback) item.Callback(this.Owner);
  }

Now it works... but there's a strange delay (the time the popover takes to complete his animation and be dismissed). Probably the viewcontroller can't handle multiple animations/component transitions at the same time...