Ion-menu off-menu click doesn't close menu

Ionic Framework
1

Hey, I just created a new app with side-menu template, and I encountered a problem that closing the sidemen is only done by swipe, not by taping or clicking the menu. Is this a bug or not implemented ?

2

Not sure but is it not the difference between an iOS and Android menu? Like for one type it doesnā€™t close thatā€™s the behavior and for the other it does?

Iā€™m not sure anymore. I define the use of menuType: 'overlay' in app.module.ts to have the same behavior on both type of devices. Just quickly tested, I was able to close the menu by clicking outside of it

IonicModule.forRoot({
   menuType: 'overlay'
}
3

Iā€™m not sure if @moda20 means opening/closing the menu via MenuController.enable or not but it is no longer working for me in Ionic4.
this.menuCtrl.enable(true)

I forgot to mention - on devices. It works in desktop browsers.

4

My this.menuCtrl.enable not working might be for another reason. I ran out of time today for further testing.

5

@moda20, Iā€™m not sure this is on track with what you asking about but Iā€™ll this here anyways.

In Ionic3 I could use this.menuCtrl.enable(true/false); to open/close the menu anywhere anytime on both devices and desktop.
In Ionic 4 I find I need to determine if the app is running on a device or desktop first and then call one of these two functions respectively.

  if(isDevice){
      this.menuCtrl.open();
    }else{
      this.menuCtrl.enable(this.menuOpen);
    }

So, on a device, I now use this.menuCtrl.open();

Alas, there is currently an issue with detecting if it is a device accurately.
https://forum.ionicframework.com/t/how-to-detect-platform-using-ionic-4/138189

6

Thanks for seeing this, but the problem was with Just safari. On computer safari browser, it doesnā€™t close when clicking outside the menu. On the other hand in Chrome and on android it does close.

7

what do you mean with ā€œcloseā€

close like ā€œclick on the hamburger button to display (open) it and then click outside to hide (close) itā€

or

close like ā€œusing the menu controller to disable the menuā€

in any case, just tested, works fine in Safari for me

do you have set another menu type than overlay?

8

Use menuCtrl in ts file in ionic 4

ā€¦
import { MenuController } from ā€˜@ionic/angularā€™;
ā€¦

constructor(private menu: MenuController) {

}

ā€¦
openEnd() {
this.menu.close();
}

9

Hi,
I am facing the similar issueā€¦on the event of the menuitem click i am closing the menu but it doesnā€™t seems to be working.
The ionic version is 5.4.4
on such a small thing the issue is there.I wish i would have started the project in xamarinā€¦Hamburger behavior is very inconsistent.itā€™s working on few devices and it,s not not working on some of the device.If feature like hamburger will be that incosistent then how come anybody can proceed in development.Really having tough time for solving this clueless IONIC bug

10

I needed to close and open the menu in Chrome and I resolved

m2
m2896Ɨ181 7.37 KB

m1
m11262Ɨ411 11.7 KB

11

Thanks. this saved my time :grinning: :grinning:

12

Do you use ion-menu-toggle inside your ion-list ?
If you donā€™t write ion-menu-toggle the menu will be still visible after item click.