I am trying to set up some code to close an <ion-menu> when I click outside of it, however, when I click anywhere except the <ion-title>, the click event targets the <ion-app> tag.
Here is my code:
<ion-menu type="overlay" side="end" menuId="first" contentId="main" (outsideClick)="clicked_outside_menu($event)">
<ion-header>
<ion-toolbar color="primary">
<ion-title>Start Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item>Menu Item 1</ion-item>
<ion-item>Menu Item 2</ion-item>
<ion-item>Menu Item 3</ion-item>
<ion-item>Menu Item 4</ion-item>
<ion-item>Menu Item 5</ion-item>
</ion-list>
</ion-content>
</ion-menu>
The (outsideClick) directive is written as follows:
@HostListener('document:mousedown', ['$event'])
onClick(e: MouseEvent): void {
console.log(this.elementRef);
console.log(this.elementRef.nativeElement);
console.log(e.target);
console.log(this.elementRef.nativeElement.contains(e.target));
if (!this.elementRef.nativeElement.contains(e.target)) {
this.outsideClick.emit(e);
}
}
(The console.log calls are how I have determined that the event is targeting the <ion-app> tag.)
The only element I can click on where the click event doesn't target the <ion-app> is the title text (specifically the text, not anywhere else on the <ion-toolbar>) at the top of this menu:
However, when the menu is not open, clicks target the HTML elements that I would expect them to, such as other text on the screen, the toolbar as part of the main page, and other elements that also show up in the menu.
It seems that if I add a button to the menu, I cannot click on it, and attempting to click on it causes the click to again target the <ion-app> at the root of the app. It seems very weird that the <ion-title> has a clickable area, but not the buttons which are intended to be clicked on. Maybe they are being blocked by the <ion-app> when the menu is opened for some reason?
Any idea why this is happening? It would be very nice to know how to fix it.