bug & fix: ion-split-pane not allow click in ion-menu (Vue.js)

Bug Report

Ionic version: [x] 4.x

Current behavior: When you use ion-split-pane with ion-menu inside can’t click on elements and click on next layer instead ion-menu layer.

Expected behavior: Element click as expected

Steps to reproduce: Try to use ion-split-pane with ion-menu normally.

Related code:

<ion-split-pane class="indexTopMenu" id="main-content">
      <menu-lateral />
    </ion-split-pane>

MenuLateral.vue:
<template>
  <ion-menu class="menuOptions" type="overlay" side="start" content-id="main-content">
    <ion-content padding>
      /* Insert what you want here as button or anything else */
    </ion-content>
    </ion-menu>
</template>

Other information: How to fix: CSS: .menu-content-open { pointer-events: unset !important; }

If z-index show behind main layer use this option: .menu-content.menu-content-open { z-index: 20; }

Ionic info:

Ionic:

   Ionic CLI       : 5.2.7 (C:\Users\Pablo\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework : @ionic/vue 0.0.9

Vue:
    @ionic/vue: 0.0.9 => 0.0.9

Utility:

   cordova-res : 0.6.0
   native-run  : 0.2.8

System:

   NodeJS : v12.8.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.10.2
   OS     : Windows 10

[liamdebeasi]

@PabloGBarcelo Thanks for the follow up. I took a look at your repo, and it looks like this bug is occurring because you are using ion-split-pane incorrectly. I changed the following things, and the app is now working correctly:

1. ion-menu-controller does not need content-id.
2. You need to wrap your main content in a div and assign it the ID main-content.
3. ion-split-pane needs to have content-id, not id.
4. Your main content should be inside of the ion-split-pane component.

The new template should look like:

<template>
  <ion-app>
    <ion-menu-controller></ion-menu-controller>

    <ion-split-pane content-id="main-content">
      <ion-menu class="menuOptions" type="overlay" side="start" content-id="main-content">
        <ion-content class="fullWidth" padding>
          <button @click="close">close</button>
        </ion-content>
        <div>footer</div>
      </ion-menu>
      
      <div id="main-content">
        <ion-button @click="openStart">Open Menu</ion-button>
        <list-component></list-component>
      </div>
    </ion-split-pane>    
  </ion-app>
</template>

You will likely need to add width: 100% to your main content as well. For further help implementing your app, I recommend looking at the following resources:

ion-split-pane Documentation Ionic Forums Ionic Slack

I am going to close this issue. Thanks!

[MachineMakesNoise]

As I suspected I was using menu wrong; checked the side menu example and my issue was caused by a wrong contentId on the menu. So You can disregard my comments related to this, thank you 😃