bug: Black backdrop of Modal triggered from ActionSheet

[mensch]

Type: bug

Ionic Version: 2.x

Platform: all

I'm experiencing an issue when triggering a Modal from a method in an ActionSheet. When the animation of the modal occurs the list view I expected to see is obscured by an opaque black div. It appears the ion-page from where the ActionSheet is triggered gets a hidden attribute as soon as the animation of the Modal starts. Dismissing the Modal works correctly, the underlying list view is visible when the Modal is animating.

Not sure how to provide a CodePen for this, so I've posted the relevant code below.

This is the Modal:

import {Page, Modal, NavController, ViewController} from 'ionic/ionic';

@Page({
  templateUrl: 'build/pages/modals/comment/comment.html'
})
export class CommentModal {
  constructor(nav: NavController, viewCtrl: ViewController){
    this.nav = nav;
    this.viewCtrl = viewCtrl;
    this.comment = { content : '' };
  }

  closeModal() {
    this.viewCtrl.dismiss();
  }

  showModal() {
    let modal = Modal.create(CommentModal);
    this.nav.present(modal);
  }
}

This is the Page where the ActionSheet is triggered:

import {Page, NavController, NavParams, ActionSheet} from 'ionic/ionic';
import {DataService} from '../../services/data';
import {TimeAgoPipe} from 'angular2-moment';
import {CommentModal} from '../modals/comment/comment';

@Page({
  templateUrl: 'build/pages/post/post.html',
  pipes: [TimeAgoPipe],
  providers: [DataService, CommentModal]
})
export class Post {
  constructor(nav: NavController, navParams: NavParams, data: DataService, commentModal: CommentModal) {
    this.nav = nav;
    this.commentModal = commentModal;
    this.post = navParams.get('post');
    this.comment = {
      content : ''
    };

    data.getData('comments',{
      post : this.post.id,
      per_page : 30,
      order : 'DESC',
      orderby : 'date'
    }).subscribe(response => this.comments = response);
  }

  saveComment() {
  }

  openCommentSettings(content) {
    let actionSheet = ActionSheet.create({
      buttons: [
        {
          text: 'Delete comment',
          style: 'destructive',
          handler: () => {
            console.log('Destructive clicked');
          }
        },{
          text: 'Edit comment',
          handler: () => {
            this.commentModal.showModal(content);
          }
        },{
          text: 'Cancel',
          style: 'cancel',
          handler: () => {
            console.log('Cancel clicked');
          }
        }
      ]
    });
    this.nav.present(actionSheet);
  }
}

[adamdbradley]

Sorry but I'm not really following, would you be able to explain further and provide a minimal test case that replicates this issue?

[mensch]

I was afraid you'd say that. ;-)

This animated gif demonstrates the behaviour, it seems related to this report #5430.

I'll see if I can provide a working example later.

[mensch]

A simple test app demonstrating the issue can be downloaded here. After some further testing the issue seems to vary from browser to browser. In Chrome (which I use for testing) the modal is visible, but in Safari and Firefox I only see a black div. If necessary I can try in the iOS emulator as well.

[adamdbradley]

Awesome, thanks for example and creating the issue, this was a good find! Should be fixed now and will be in the next release, thanks!