Menu problem in modal page in Beta 11

My app has a common side menu and a modal page which has a menutoggle button.
Up to beta 10 opening the side menu was no problem. I used navCtrl.present(modalpage) - but this is gone.
Now in beta 11 due to the changed overlay handling, the menu doesn’t open anymore on the modal page when clicking the menu button.
If I close the modal page I can see that the menu opened on the parent page.

Does anyone know how to use the sidemenu on a modal page with the new ModalController?

2 Likes

@mpaland: have you succeeded to find any solution upon side menu.

In my case too, side-menu is not working. And my most of navigation is depend upon side-menu.

Regards

@vaibsVB Sorry. No, not yet. Tried different workarounds, but none is cool so far.
I opened an issue: https://github.com/driftyco/ionic/issues/7586
You can describe your problem there, too, if it’s similar.

Yes @mpaland. I also opened an another issue recently here : https://github.com/driftyco/ionic/issues/7600

Thanks.

Have you seen the breaking change for Beta 11

Overlay components, such as Alert or Modals, should now be created using its injected provider.
Overlays now have the present() method on the overlay’s instance, rather than using nav.present(overlayInstance).
All overlays now present on top of all app content, to include menus.

@imatefx, yeah, thanx for pointing this out. Of course I’ve read the changelog and I changed my app accordingly.
Problem is, that the menu opens behind the (modal) overlay. So in the moment, I haven’t found any solution that an overlay page (modal here) can use/open/toggle the global app sidemenu.
But this is necessary on several pages in my app.

Why modal? Because I need data back from the modal page. Can’t be done with a normal pushed page (as far as I know)
Why subpage(s) and a menu on a modal page? Because some data must be modified in detail on the modal page.

I consider this as a bug / design flaw in beta 11 in the moment.

@mpaland AFAIK If you push a page with params and you modify that object in the second page , it should be referenced back which gives you the data back on the first page :slight_smile:

On first page

this.nav.push(SecondPage, { role: role });

On second page

this.roleData = this.params.get('role');
roleData.name = 'My new role name';
this.nav.pop();

Back on first page

console.log(role) // should give you the new name

Personally i do not think that menu should be displayed when a Modal is shown.
As far as i know Modal is a component to isolate and focus the user on a particular thing.
What difference does it makes if a user could navigate away from it?

Here is a quote taken from

Modals should be applied only to meet the following objectives:

Interruption: Forcing the user to make a decision or complete a task at an important part of their workflow. Ask yourself, “do I really want to interrupt the user?”
Feedback or Correction: Confirming decisions. E.g., “are you sure?” moment.
Deep Dive: Focusing the user on a single piece of content, be it an image, article, or a video.

@imatefx Thanx a lot for your suggestions. I discussed your suggestions before - but the sample above seems to be a bad design pattern for two way data. For one way data, we use passing parameters over the nav stack a lot.
Sure, data is passed ‘by reference’ and is modified by/on the second page but how does the first page get informed when the second page is closed? nav.push() is an async method, returning a transition promise. There is no onDismiss event which notifies the first page, when the second page is closed and modified data is valid.
Appreciate any suggestions on that!

In the moment we have to wait and see how the ionic team wants to handle the sidemenu in overlays. If a sidemenu is considered bad practice, we have to change all modal dialogs that they don’t have any subpages.
As you stated out above, a modal page means interruption: the user can’t do anything else with the app as modifying the modal. But if necessary, a modal can have a subpage(s) if not all data fits in the modal.
Nav flow is: page1 --> modal --> subpage --back–> modal --back–> page1

So, as @jgw9617 pointed out here, it’s the wanted and new behavior: No sidemenus in overlays. This is a bit unfortunate, but we have to deal with it, making app control more consistent.

What to do?

  • Create modal pages with no sidemenus. One may use an ActionSheet or Popover for further menu items. But I don’t recommend this.
  • Transform your modal page to a normal page as @imatefx said above. To get the params back, you can use a promise. More clean for returning data. Sample code:
let p = new Promise((resolve) => {
  this.nav.push(MyOldModalPage, { data: somedata, dismiss: resolve });
});

p.then((data: any) => {
  if (data) {
    console.log(data);
});

and on MyOldModalPage:

onClose() {
  this.nav.pop();
  this.navParams.data.dismiss(somedata);
}
1 Like

:thumbsup:
Thanks for the example.