CODEWITHSUNDEEP
modal-dialogionic3
JMS
JMS

Reputation: 1091

Ionic: side menu doesn't close before opening modal

In Ionic 3, I'm trying to open a modal from within a side menu:

  <ion-item menuClose (click)="presentProductModal()"> Add Product</ion-item>

When the side menu is opened, the rest of the screen loses focus. When the modal link is selected, the side menu disappears. However, the modal and the main screen remain unfocused. I'm guessing there's some timing / promise issue here, but I'm not sure what to do exactly. Is there some workaround?

Here are two images demonstrating the issue (the "Add Product" link opens the modal): enter image description here

Thanks in advance!

Upvotes: 0

Views: 627

Answers (3)

Akash Chaudhary
Akash Chaudhary

Reputation: 711

you can use MenuController

import { MenuController } from 'ionic-angular';
constructor(public menuCtrl: MenuController) {
 }  
     If you want to close menu please use close() event

      this.menuCtrl.close()

     If you want to open menu please use open() event

      this.menuCtrl.open();

Upvotes: 0

JMS
JMS

Reputation: 1091

The template for the modal was simply missing wrapping tags.

Upvotes: 0

ashfaq.p
ashfaq.p

Reputation: 5469

You can use the menu output event: ion-close.

Listen for this event, and open the modal after menu has closed.

Read more about output events for menu here: menu close event

or

Remove menuClose directive from ion-item. In your click function, close the menu programmatically using close method. Read more about it here: Close menu programmatically.

This method will return a promise which will be resolved when menu is fully closed, you can then open the modal in its resolve.

this.menuController.close(<your menu id>).then(() => {
   this.modal.create.....
})

Upvotes: 1

Related Questions