bug: SplitPane not working when Menu is wrapped in a Component

[nickwinger]

Bug Report

When wrappen the menu inside a SpliePane in it's own component (e.g. <my-menu>) the SplitPane is not working as expected (2 Panes are shown)

Ionic version:

[x] 5.x latest

Current behavior:

When wrapping the menu inside a SplitPane in it's own component (e.g. ) 2 Panes are shwon

Expected behavior:

The SplitPane should work as if i would put the <ion-menu> right underneath the SplitPane

Steps to reproduce:

Related code: not working:

<ion-split-pane when="xl" contentId="main">
  <my-menu></my-menu>

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

working:

<ion-split-pane when="xl" contentId="main">
  <ion-menu>...</ion-menu>

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

insert short code snippets here

Other information:

Ionic info:

insert the output from ionic info here

[liamdebeasi]

Thanks for the issue. Can you provide a repo with the code required to reproduce this issue?

[nickwinger]

Here is the repo where you can reproduce the issue: https://github.com/nickwinger/ionicMenuBug

The menu should be permanent open on desktop but it isn't

[liamdebeasi]

Thanks for the follow up. I need to dig into this more, but at first glance it does not look like this is possible. The ion-menu in your app is missing these styles: https://github.com/ionic-team/ionic/blob/master/core/src/components/split-pane/split-pane.scss#L56-L61.

The problem is that the ::slotted pseudo-element only works on slotted top-level nodes. Since the top level node is your wrapped-menu component, the styles will not get applied.

[nickwinger]

hmm, i copied the css-classes applied to the ion-menu when it is not wrapped to the wrapped ion-menu but it still not showing. I guess there must be more into showing the menu but only css-classes (styles) ? is it really only css classes handling the menu show/hide state ?

[liamdebeasi]

Can you try the following dev build and let me know if it fixes the issue?

npm i @ionic/[email protected]

[cnanders]

This bug is still happening as of 5.4.3. If you get rid of the<ion-split-pane> it works as advertised with <ion-menu> wrapped in its own component, e.g., <my-side-menu>

<ion-app>
    <my-side-menu></my-side-menu>
    <ion-router-outlet></ion-router-outlet>
</ion-app>

[jbagaresgaray]

This bug is still happening as of 5.6.3 for @ionic/vue

<IonSplitPane content-id="main-content">
     <Sidebar />
     <ion-router-outlet id="main-content" ></ion-router-outlet>
</IonSplitPane>

so the temporary work around is

ion-menu {
  display: flex;
  flex-shrink: 0;
}

[MRDNZ]

Bug is still there in "@ionic/angular": "^6.1.4". Is there any update/progress on this subject? It is impossible to wrap split-pane/menu logic in separate components

[timonjagi]

Facing the same issue on @ionic/angular ^6.5.3. Any update on this issue?

[akshay-trex]

any update on the fix for this bug?

[philjones88]

Still in v7

[ZenulAbidin]

Latest version of @ionic/angular ^7.4.3 still has this problem - using href instead of routerLink is an acceptable but not satisfactory workaround.

[arrighidante]

Still failing in @ionic/angular7.6.1

[liamdebeasi]

Hi everyone,

Here is a dev build if anyone is interested in testing a proposed fix: 7.6.2-dev.11704922151.1fd3369f

Install example:

npm install @ionic/[email protected] @ionic/[email protected]

Please note that this is an Ionic 8 build and is subject to the Ionic 8 breaking changes.

[liamdebeasi]

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic-framework/pull/28801, and a fix will be available in an upcoming release of Ionic Framework. We are shipping this in a major release of Ionic to de-risk some of the internal infrastructure changes we made to resolve this bug. Feel free to continue testing the dev build, and let me know if you run into any issues.

[ionitron-bot[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.