bug: IonToggle & IonRange issue in IonMenu

Bug Report

Ionic version:

[ ] 4.x [x] 5.x

Current behavior:

IonToggle and IonRange are not interactable in an IonMenu. I’ve tested this via ionic serve with various browsers.

Expected behavior:

that those controls are interactable

Steps to reproduce:

putting those components in an IonMenu

Related code:

import React, { MutableRefObject, useEffect, useRef } from 'react';
import { IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonMenu, IonNote, IonPage, IonRange, IonTitle, IonToggle, IonToolbar } from '@ionic/react';
import { glassesOutline, settingsOutline } from 'ionicons/icons';
import './Home.css';

const MyMenu = React.forwardRef<HTMLIonMenuElement, {}>((props, ref) => {

  return (
    <IonMenu ref={ref} contentId="menu-content" side="end" type="overlay" >
      <IonHeader>
        <IonToolbar color="primary">
          <IonIcon icon={settingsOutline} slot="secondary" />
          <IonTitle class="ion-text-capitalize">Menu</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent id="menu-content">
        <IonList>
          <IonItem>
            <IonLabel class="ion-text-capitalize">foo</IonLabel>
            <IonToggle color="success" slot="end" checked={true}  />
          </IonItem>
          <IonItem>
            <IonRange min={0} max={100} value={50}>
              <IonIcon icon={ glassesOutline } size="small" slot="start" />
              <IonIcon icon={ glassesOutline } size="medium" slot="end" />
            </IonRange>
          </IonItem>
          <IonItem>
           <IonButton>but I'm working</IonButton>
          </IonItem>
        </IonList>
      </IonContent>
  </IonMenu>
)})


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

  const menuRef: MutableRefObject<HTMLIonMenuElement|null> = useRef(null)

  useEffect(() => {setTimeout(() => menuRef.current!!.setOpen(true), 1000)})

  return (
    <IonPage>
      <MyMenu ref={menuRef}/>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Buggy</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen onClick={async () => {
        const m = menuRef.current!!
        if(! await m.isOpen()) m.setOpen(true)
      }}>
        <IonNote class="ion-text-center">tap to open menu</IonNote>
      </IonContent>
    </IonPage>
  );
};

export default Home;

Other information:

Ionic info:

Ionic:

   Ionic CLI       : 6.12.3 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/react 5.5.4

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]

Yeah that’s a really vague description 😅 . I will update the docs so it’s more clear.

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