ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
50.93k stars 13.51k forks source link

Ionic Menu Button Freeze -> Iframe Content in Main Window #29693

Open greenvilleassociates opened 2 months ago

greenvilleassociates commented 2 months ago

Prerequisites

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 (

@PhotoShare {photos.map((photo, index) => ( ))} takePhoto()}> Copyright Greenville Associates Consulting @2015-2024 PhotoMenu Listings - New Listings - Most Popular Sales - ISP Membership Sales - TV Packages MyCart MyAccount Summary MyAccount Team Create Sales Inquiry

); };

export default Photo;

greenvilleassociates commented 2 months ago

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.