v4: menu: menu closes when taping in an higher component #14816
Description
Bug Report
Ionic Info
Run ionic info from a terminal/cmd prompt and paste the output below.
Ionic:
ionic (Ionic CLI) : 4.0.0-rc.11 (C:\Users\nico9\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : @ionic/angular 4.0.0-alpha.11
@angular-devkit/core : 0.7.0-rc.3
@angular-devkit/schematics : 0.7.0-rc.3
@angular/cli : 6.0.8
@ionic/ng-toolkit : 1.0.0-rc.11
@ionic/schematics-angular : 1.0.0-rc.11
System:
NodeJS : v10.3.0 (D:\Program Files\nodejs\node.exe)
npm : 6.1.0
OS : Windows 10
Describe the Bug
When clicking in an action sheet(like the dialog of ion-select) or popover opened from menu, the menu closes when taping inside the alert.
Steps to Reproduce
Steps to reproduce the behavior:
- Create new blank starter project with following page template:
<ion-menu side="start" swipeEnabled="false" contentId="menuContent">
<ion-header>
<ion-toolbar color="primary">
<ion-title>The menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content id="menuContent">
<ion-list>
<ion-item lines="full">
<ion-label style="color: black">Language</ion-label>
<ion-select>
<ion-select-option>EN</ion-select-option>
<ion-select-option>DE</ion-select-option>
</ion-select>
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<ion-header>
<ion-toolbar>
<ion-menu-button slot="start"></ion-menu-button>
<ion-title>
Ionic Blank
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
The world is your oyster.
<p>If you get lost, the <a target="_blank" href="https://ionicframework.com/docs">docs</a> will be your guide.</p>
</ion-content>
- Open the menu and click on the select item "language"
- Tap inside the displayed alert
As you can see the menu closes and the alert don`t respond to the tap.
Related Code
/core/src/components/menu/menu.tsx line 190
...
@Listen('body:click', { enabled: false, capture: true })
onBackdropClick(ev: any) {
const path = ev.path;
if (path && **!path.includes(this.menuInnerEl)** && this.lastOnEnd < ev.timeStamp - 100) {
ev.preventDefault();
ev.stopPropagation();
this.close();
}
}
...
The marked condition should check if the backdropElement of the menu is included in the path, to ensure it wont fire when the user interacts with "higher" components(modals, popovers, alerts etc.) than the menu.
Expected Behavior
When interacting with an "higher" component the menu should stop fire its backdrop click.
Additional Context
I´ll add a pull request.