v4: menu: menu closes when taping in an higher component

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:

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

1. Open the menu and click on the select item “language”
2. 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.

[Dasone]

@tntwist It got resolved with the last update 👍

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