[Ionic 4.0.0, beta 8] Menu not working with 2 <ion-split-pane>'s

[JoeBoxr]

Bug Report

Ionic Info
Ionic Framework : @ionic/angular 4.0.0-beta.8
@angular-devkit/core : 0.7.2
@angular-devkit/schematics : 0.7.2
@angular/cli : 6.0.8
@ionic/ng-toolkit : 1.0.0
@ionic/schematics-angular : 1.0.1

Describe the Bug
If you have an ion-split-pane tabbed PWA and place another ion-split-pane on a tab, the Menu and the main ion-split-pane are messed up.

Steps to Reproduce
Steps to reproduce the behavior:

1. Create a tabs project from the iconic v4 templates
2. Place a ion-split-pane with menu on app.component.html
3. Place a ion-split-pane on any tab.
4. Resize the browser and the menu is messed up.

Expected Behavior
Resizing the browser should have the menu disappear and reappear appropriately.

Additional Context
This works fine in Ionic v3

[GuilhermeBCC]

duplicate #15527

[brandyscarney]

Thanks for the issue! Are you still seeing this problem in latest, 4.0.0-beta.16? It seems to have been resolved on the linked duplicate issue. 🙂

[JoeBoxr]

Yes this still exists in beta.16... let me know if you need me to create a test project for you.

[JoeBoxr]

The LEFT menu appears to behave better most of the time while a RIGHT menu on the second splitpane is messed up. This bug report covers that issue #15779

[paulstelzer]

It would be great if you could make a repo so we can take a look at it :) WOuld be the best if you could show issue #15779 inside, too :)

[JoeBoxr]

Hello.

I have a stackblitz.io project running beta 13 that shows the issue. It's got its own issue at: #16035

Regards

[paulstelzer]

Could you please update to RC.0 and create a repo here at github, so we can fork it?

[JoeBoxr]

Hello.

I've made a repo with RC.0 showing the bug. After updating to RC.0 it seems that the right menu is behaving but the left menu is not. Let me know if you need anything else.

Regards

https://github.com/JoeBoxr/ionictest

[JoeBoxr]

Hello.

Just confirmed this issue still exists in RC.1. This is a bug and needs to be fixed for our application.

Regards

[paulstelzer]

Thanks for checking, but we not changed anything related to it and at the moment it has not the highest priority. But if you could take a look and maybe create a PR, that would be awesome :)

[manucorporat]

@JoeBoxr we are well aware of this issue, but it requires a lot of work and refactorization to make it work. We will handle this issue after 4.0 final is released! Thanks for your time!

[lincolnthree]

Thanks @manucorporat -- This would be a great piece of functionality. Right now having a lot of trouble getting a conditionally rendered side-pane or menu to work "smoothly". I'd be happy to test this once it's supported ;)

[joelmeaders]

@lincolnthree any good workarounds since February?

I'm currently using an ngIf/else with ng-template to switch from a single menu split pane to a dual menu split pane depending on the current page. My workaround works but not without a full page flicker and too much code in the html template.

First I tried nested split panes, one in appComponent and one on a routeable component, creating a huge mess I couldn't fix.

Next, I tried adding my second menu to the split pane in appComponent with <ion-menu ... ngIf="currentPath.includes('exhibitorsearch/')"> where current path was a string set by an EventEmitter. This both works and doesn't work. The menu is always there on the right page, but sometimes it's hidden (swipe works) and sometimes it shows, but it should always show on a large screen. If the app was only mobile I wouldn't have an issue with the hidden menu.

A working nested split pane would be perfect.

[JoeBoxr]

Hello. No workarounds yet. We had to refactor to only use 1 split pane.

[GuilhermeBCC]

You do not need to use ion-split-pane. Look for any drawer in JavaScript.

[joelmeaders]

I found a temporary solution that works much better. It allows an always active menu and a dynamic secondary menu that only shows when you want it to using only a single split pane. Both menus work on desktop and mobile and appear/behave how they should.

The catch is the menus need to be contained directly within the split pane (not in child components) but the menu content can be within a component. Also, using an *ngIf on the secondary menu that should show only sometimes will not work on it's own. The sub-content of the optional menu needs to re-render in order for the split pane to "register" and display the optional menu correctly (otherwise on desktop or tablets it only shows sometimes and is hidden other times).

<ion-app>
  <ion-split-pane contentId="mainAppContent">
              <!-- this menu always shows on the left -->
  	<ion-menu side="start" contentId="mainAppContent" menuId="mainMenuOutlet">
  		<main-menu-content></main-menu-content>
  	</ion-menu>
              
              <!-- this menu only appears when the enableFilterMenu$ observable is true -->
  	<ion-menu [disabled]="!(searchService.enableFilterMenu$ | async)" side="end" contentId="mainAppContent" menuId="searchMenu">
  		<app-search-menu *ngIf="searchService.enableFilterMenu$ | async"></app-search-menu>
  	</ion-menu>

  	<ion-router-outlet id="mainAppContent"></ion-router-outlet>
  </ion-split-pane>
</ion-app>

Using both the [disabled] property on the menu, with the *ngIf on the inner content is what did the trick. My observable is set in the App Component instead of child components to prevent a "Expression has changed after it was checked.". I'm deciding when to show the menu based on the current route.

[liamdebeasi]

Hi everyone,

Here is a dev build with a proposed fix if anyone is interested in testing: 7.5.1-dev.11697568647.1ac87d08

Install Example: npm install @ionic/[email protected]

[liamdebeasi]

Thanks for the issue. This has been resolved via #28370, and a fix will be available in an upcoming release of Ionic Framework. Please feel free to keep testing the dev build, and let me know if you run into any problems.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.