bug: menu in first split pane is not expanded automatically if there is a second split pane nested inside it

[kdankert]

Bug Report

Ionic version:

[ ] 4.x
[x] 5.x

Current behavior:

The layout is correct, although the menu in the first split pane is not expanded (able to toggle it with the menu toggle button). Depending on the when clause in the second split pane, it works after resizing, so that split pane 1 is triggered

Expected behavior:

The menu should be expanded when loading the site and not depend on any other split panes.

Steps to reproduce:

1. Add a split pane with a menu and content inside it
2. Add a split pane inside the content
3. Serve the ionic website and menu is not expanded

Related code:

VueJS

<template>
 <ion-app>
 <ion-split-pane content-id="main-content">
 <ion-menu content-id="main-content">
 <ion-header>
 <ion-toolbar>
 <ion-title>Menu</ion-title>
 </ion-toolbar>
 </ion-header>
 </ion-menu>

 <div class="ion-page" id="main-content">
 <ion-header>
 <ion-toolbar>
 <ion-buttons slot="start">
 <ion-menu-toggle menu="start">
 <ion-button>
 <ion-icon :src="list"></ion-icon>
 </ion-button>
 </ion-menu-toggle>
 </ion-buttons>
 <ion-title>Test</ion-title>
 </ion-toolbar>
 </ion-header>

 <ion-content class="ion-padding">
 <ion-split-pane when="sm" content-id="1">
 <p id="1">Test</p>
 <p id="2">Test2</p>
 </ion-split-pane>
 <ion-router-outlet></ion-router-outlet>
 </ion-content>
 </div>
 </ion-split-pane>
 </ion-app>
</template>

Other information:

Ionic info:

Ionic:

 Ionic CLI : 6.12.0 (/Users/<user>/.config/yarn/global/node_modules/@ionic/cli)
 Ionic Framework : @ionic/vue 5.4.0

Capacitor:

 Capacitor CLI : 2.4.2
 @capacitor/core : 2.4.2

Utility:

 cordova-res : not installed
 native-run : not installed

System:

 NodeJS : v14.13.1 (/usr/local/Cellar/node/14.13.1/bin/node)
 npm : 6.14.8
 OS : macOS Catalina

[kdankert]

I figured out that this is related to the menu component reacting to every split pane update event and not to those it's a child of.

[averyrousseau]

Thanks for the issue! I wanted to circle back to this. I'm able to replicate in core, even on Ionic 6.

While testing, I modified the code around the nested split pane slightly to make the two split panes easier to see:

<ion-content class="ion-padding">
 <ion-split-pane when="sm" content-id="outlet">
 <p id="1">Test</p>
 <ion-router-outlet id="outlet"></ion-router-outlet>
 </ion-split-pane>
</ion-content>

I can also confirm this behavior:

Depending on the when clause in the second split pane, it works after resizing

Here's a screencast using when="sm": https://user-images.githubusercontent.com/90629384/152019177-ce99e1dc-14d1-42b1-8900-81d63b34f5a7.mp4
And another with the when prop removed -- note that the menu doesn't stay open properly on resize: https://user-images.githubusercontent.com/90629384/152019192-fba0fa77-7605-439c-b1c7-10e3e07c3fae.mp4

I also noticed that the menu-button doesn't refresh properly either (the button is visible when it should be hidden on larger screen widths).

[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/angular@7.5.1-dev.11697568647.1ac87d08

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