Ionic Menu Button Freeze -> Iframe Content in Main Window

[greenvilleassociates]

trafficstars

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v8.x

Current Behavior

I had a working website which essentially used Ionic to put a wrapper around an existing HTML/Javascript portal components. I am loading an Iframe in the Content main with a header above, and footer below. Everything worked well with Tabs at the bottom of the app screen for Navigation.

On the Content Pages, I decided to implement a menu system using an IonMenuButton, and IonRouter to allow more depth on each page. The New Menu System is working in test...but it is now blocking the Iframe in the main content menu of each site, as if its intercepting the keystrokes all to the menu listener?

Need Help.

Site Example is ionicapp.glocation.info which is my test app with the new menu system. Any assistance would be appreciated.

Expected Behavior

I expect the new menu bar will not impair the Iframe interaction with the desktop. In both Ionic Serve, and in a Production Build I am having the same problem.

Steps to Reproduce

Go to ionicapp.glocation.info....

Click on any of the menus... and none of them work except the photo app...which is just a copy of the Starter App from Ionic which I am working on.

Code Reproduction URL

https://ionicapp.glocation.info

Ionic Info

$ ionic info

Ionic:

Ionic CLI : 7.2.0 (E:\Users\Administrator.CAPITOL1\AppData\Roaming\npm\node_modules@ionic\cli) Ionic Framework : @ionic/react 8.2.2

Capacitor:

Capacitor CLI : 6.1.0 @capacitor/android : 6.1.0 @capacitor/core : 6.1.0 @capacitor/ios : 6.1.0

Utility:

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

System:

NodeJS : v22.3.0 (E:\Program Files\nodejs\node.exe) npm : 10.8.1 OS : Windows Server 2012

Additional Information

I think I am using current components and I would call this a bug, as without the IonMenuButton this works.... a code snippet is below for the Photo page....which has the freezing problem.

import { IonRouterOutlet, IonList, IonItem, IonMenu, IonMenuButton, IonFooter, IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonFab, IonFabButton, IonIcon, IonGrid, IonRow, IonCol, IonImg, IonActionSheet, } from '@ionic/react'; import ExploreContainer from '../components/ExploreContainer'; import './Photo.css';import { camera, trash, close } from 'ionicons/icons'; import { usePhotoGallery } from '../hooks/usePhotoGallery'; import GLILOGO from "../assets/glocationinfo2.png";

const Photo: React.FC = () => { const { photos, takePhoto } = usePhotoGallery(); return ( <IonPage> <IonHeader> <IonToolbar color="success" ><IonMenuButton slot="start" menu="main2" visible="true"></IonMenuButton><IonTitle>@PhotoShare</IonTitle> </IonToolbar> </IonHeader> <IonContent> <IonGrid> <IonRow> {photos.map((photo, index) => ( <IonCol size="6" key={photo.filepath}> <IonImg src={photo.webviewPath} /> </IonCol> ))} </IonRow> </IonGrid> <IonFab vertical="bottom" horizontal="center" slot="fixed"> <IonFabButton onClick={() => takePhoto()}> <IonIcon icon={camera}></IonIcon> </IonFabButton> </IonFab> </IonContent> <IonFooter> <IonToolbar color="dark"> <IonTitle class="GLICOPY">Copyright Greenville Associates Consulting @2015-2024</IonTitle> </IonToolbar> </IonFooter>

PhotoMenu Listings - New Listings - Most Popular Sales - ISP Membership Sales - TV Packages MyCart MyAccount Summary MyAccount Team Create Sales Inquiry

<IonRouterOutlet id="main2"></IonRouterOutlet> </IonPage>

); };

export default Photo;

[greenvilleassociates]

And BTW... if you dont believe me.. FusionPro6.glocation.info is a working version of the same App... and you can see it does in fact work but sans the menu.... This is a hosted compiled IonicReactSystem which is kinda cool. Big Ionic Fan So Far....but fighting with both Electron and Android from Capacitor.

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[thetaPC]

Closing due to the lack of a reproduction. If the issue persists, please open a new one with a minimal reproduction. Thanks!

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