bug: IonMenuButton becomes hidden and/or detached from its related menu

[kutoman]

Bug Report

Ionic version:

[ ] 4.x
[x] 5.x

Current behavior:

The IonMenuButton gets hidden after having switched to another IonPage and back. Even when we set autoHide={false} the button however is prevented from being hidden but you'll see that it's detached from the menu since the menu doesn't get opened again when tapping.

Expected behavior:

Having an IonMenuButton which works despite of switching IonPages

Steps to reproduce:

1. tap on the menu button on the initial IonPage. This will open the side menu as expected
2. switch to another IonPage (press on 'second' in the sample)
3. turn back to the initial page (this will happen automatically in the sample)
4. tap on the menu button again. But there is no visible IonMenuButton anymore. Even if it was, this wouldn't work either.

Related code:

//App.tsx
import { Redirect, Route } from 'react-router-dom';
import { IonApp, IonRouterOutlet } from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';
import Home from './pages/Home';

/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css';

/* Basic CSS for apps built with Ionic */
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/structure.css';
import '@ionic/react/css/typography.css';

/* Optional CSS utils that can be commented out */
import '@ionic/react/css/padding.css';
import '@ionic/react/css/float-elements.css';
import '@ionic/react/css/text-alignment.css';
import '@ionic/react/css/text-transformation.css';
import '@ionic/react/css/flex-utils.css';
import '@ionic/react/css/display.css';

/* Theme variables */
import './theme/variables.css';
import Second from './pages/Second';

const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
      <IonRouterOutlet>
        <Route exact path="/home">
          <Home />
        </Route>
        <Route exact path="/second">
          <Second />
        </Route>
        <Route exact path="/">
          <Redirect to="/home" />
        </Route>
      </IonRouterOutlet>
    </IonReactRouter>
  </IonApp>
);

export default App;



//Home.tsx
import React, {  } from 'react';
import { IonContent, IonHeader, IonItem, IonLabel, IonMenu, IonMenuButton, IonPage, IonTitle, IonToolbar } from '@ionic/react';
import { useHistory } from 'react-router';

export const MyMenu = () => {

  return (
    <IonMenu menuId="my-menu" contentId="home-content" side="end" type="overlay" >
      <IonContent id="menu-content">
          <IonLabel>MENU 1</IonLabel>
      </IonContent>
  </IonMenu>
)}


const Home: React.FC = () => {

  const history = useHistory()

  return (
    <IonPage>
      <MyMenu/>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Buggy</IonTitle>
          <IonMenuButton menu="my-menu" slot="end"/>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen id="home-content">
        <IonItem onClick={() => history.push('/second')} button>
          second
        </IonItem>
      </IonContent>
    </IonPage>
  );
};

export default Home;

//Second.tsx
import React from 'react';
import { IonContent, IonHeader, IonLabel, IonMenu, IonMenuButton, IonPage, IonTitle, IonToolbar, useIonLoading, useIonViewDidEnter } from '@ionic/react';
import { useHistory } from 'react-router';

const MyMenu2 = () => {

  return (
    <IonMenu menuId="my-menu2" contentId="second-content" side="end" type="overlay" >
      <IonContent id="menu-content">
          <IonLabel>MENU 2</IonLabel>
      </IonContent>
  </IonMenu>
)}


const Second: React.FC = () => {

  const history = useHistory()
  const [loading] = useIonLoading()

  useIonViewDidEnter(() => {
    loading("going back", 1000, 'dots')
    setTimeout(history.goBack, 1000)
  })

  return (
    <IonPage>
      <MyMenu2/>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Second</IonTitle>
          <IonMenuButton menu="my-menu2" slot="end"/>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen id="second-content">
        lorem ipsum doloris 
      </IonContent>
    </IonPage>
  );
};

export default Second;

Other information:

Ionic info:

Ionic:

   Ionic CLI       : 6.13.1 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/react 5.6.3

Capacitor:

   Capacitor CLI   : 2.4.6
   @capacitor/core : 2.4.6

Utility:

   cordova-res (update available: 0.15.3) : 0.14.0
   native-run (update available: 1.3.0)   : 0.3.0

System:

   NodeJS : v12.16.1 (/usr/local/bin/node)
   npm    : 6.14.8
   OS     : macOS Catalina

[liamdebeasi]

Thanks for the issue. This looks like the same underlying issue as #18683.

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