ionic-team / ionic-team/ionic-framework

bug: ion-split-pane not visible when navigating from normal page - React

未关闭
#30,230 3 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
triage
主要语言
TypeScript
星标
52.7k
派生
13.3k
平均合并
1 天 15 小时
30 天内合并 PR
51

描述

### Prerequisites

- [x] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#creating-an-issue).
- [x] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [x] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already report this problem, without success.

### Ionic Framework Version

v8.x

### Current Behavior

Page 1 has split pane. Page 2 has regular menu. Both pages share the same menu component. When navigating from Page 1 to Page 2, the collapsible Menu is not visible and the IonMenuButton is not visible. Forcing it visible does not make the Menu work. When going back to Page 1, the Split Pane is NOT visible. Refreshing on Page 1 makes the Split Pane layout appear again.

### Expected Behavior

When navigating back to Page 1 from Page 2, the Split Pane layout should be visible as if the full pages are completely re-rendered.

### Steps to Reproduce

Make a basic React Ionic SPA with IonRouterOutlet. Example is in the stackblitz. Observer Page 1 has Split Pane, Navigate to Page 2, go back to Page 1. Observe Split Pane is missing. Refresh page. Observe Split Pane is visible again.

### Code Reproduction URL

https://stackblitz.com/edit/ionic-splitpane-layout-menu-combo?file=src%2Fpages%2FPage1.tsx

### Ionic Info

Ionic:

Ionic CLI : 7.2.0 (/usr/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/react 8.2.5

Capacitor:

Capacitor CLI : 6.0.0
@capacitor/android : 6.0.0
@capacitor/core : 6.0.0
@capacitor/ios : not installed

Utility:

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

System:

NodeJS : v20.18.3 (/usr/bin/node)
npm : 10.8.2
OS : Linux 6.9

### Additional Information

I'm trying to update an app to show the Menu component on all pages (so the Split Pane Layout) except for one page which I want to have the Menu toggleable like on mobile UI because I have another Menu-like component which I want to show on the same side. I tried to make the Split Pane layout global for the app and just switch between apps but had a hard time hiding the split pane on the page I want it hidden, so I reverted to having the Menu (and Split Pane) on each page of my app, but now I'm getting this issue with the Pane not behaving as expected.

贡献指南

打开贡献指南

调研方向

Start with the StackBlitz reproduction and its src/pages/Page1.tsx entry point, using the IonRouterOutlet navigation sequence from Page 1 to Page 2 and back. Compare the split-pane and menu state before navigation, after returning, and after a refresh. Done means the split-pane layout and menu controls are visible and functional when returning to Page 1.

由索引模型根据 Issue 内容生成。

评估

技术栈
react, typescript
领域
frontend
Issue 类型
缺陷
难度
4/5
预计耗时
3-5 天
活跃度
停滞
描述清晰度
基本清楚
新手友好度
35/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。