Prevent closing menu on click

Ionic Framework
1

Hello. Is there a way for the menu to remain open or manually close/open after clicking to an item? I referred here but it’s not working on ionic 4.

app.component.html

<ion-item (click)="product()"> <ion-icon slot="start" [name]="'restaurant'"></ion-icon> <ion-label>Products</ion-label> <ion-icon slot="end" *ngIf="product_icon == 1" [name]="'remove'" class="col"></ion-icon> <ion-icon slot="end" *ngIf="product_icon == 0" [name]="'add'" class="col"></ion-icon> </ion-item>

app.component.ts

product() {
this.menu.open(‘main-menu’);

if (this.product_icon == 0) {
  this.product_icon = 1;
} else {
  this.product_icon = 0;
}

}

edited: coding

2

See ‘menuClose’ property properly.

3

It is not found on new documentation

4

to update my last answer, always remember for whatever framework you are working in, they have done enough work to get international attention and you to use that. So, if they removed menuClose, that should be on purpuse. They have a tag ‘ion-menu-toggle’. Put your content inside it and menu wil be toggled.

5

Still not preventing from closing the menu. My target is when I clicked a specific item on the menu, it will not automatically close. The behavior right now is they automatically close if you clicked the <ion-item> inside <ion-menu-toggle>. I tried the menuClose on <ion-item> but it’s not working, still closing automatically.

6

Then just remove the wrapper of ion-item that is ion-menu-toggle. I am applying this and working too. I have 10items in menu, one of them I need to open as accordin, so I am not wrapping it with ion-menu-toggle.

1 Like
7

I was able to prevent the menu from closing by placing a click.stop event handler on the <ion-item>s that you want to prevent from closing the menu

8

Hi @fearnycompknowhow , can you help by sharing how you did it code wise? I was trying to put a event.stopPropagation and didn’t get it working.

9

@grelements, initially I had my entire menu wrapped in a <ion-menu-toggle>. This was causing my menu to close whenever I clicked on anything in the menu.

<ion-menu-toggle>
  <!-- Clicking on anything in here would close the menu -->
  <ion-item v-for="..."><!-- I had multiple items --></ion-item>
</ion-menu-toggle>

The two solutions that worked for me were to either remove the wrapping <ion-menu-toggle> or to prevent the click events from bubbling up from the child elements to the <ion-menu-toggle> element like so:

<ion-menu-toggle><!-- Either delete this -->
  <ion-item v-for="..." @click.stop="..."><!-- Or stop click events from bubbling --></ion-item>
</ion-menu-toggle>

You should use the <ion-menu-toggle> component only when you want the menu to be toggled.

If this doesn’t solve your problem, post you code so that I can see where you may be having problems.
Also, it may be worth noting that I’m using Ionic v5.