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

[PabloGBarcelo]

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]

Thanks for the issue. Can you provide a repo with the code required to reproduce this issue?

[saviilsy]

In Ionic React same happens with using just IonMenu and IonItem with button attributes. Buttons work if using split pane and screen wide enough so it wont overlap the page (changing type attribute in menu to other than "overlap" just breaks the whole menu so it cannot be even opened).

[liamdebeasi]

Do you know if this happens in Ionic Angular?

[saviilsy]

If You directed that question towards me: sorry no I don't if this happens with Ionic angular.

This was my first and rather disappointing venture with Ionic. Of course it could be I'm just using it wrong but does not explain why it works when the menu does not overlap the page. Or why changing the type attribute on menu breaks it.

[liamdebeasi]

Are you able to provide a reproduction of the issue? I am trying this in the Ionic React sidemenu starter and everything seems to be fine.

[PabloGBarcelo]

I tried to reproduce again.

z-index fail as expected (you can see that menu is behind main layer) but i dont understand why is not loading CSS .menu.content-open in the example and load in my project with bug. I will check tomorrow.

Here you have github with z-index problem.
https://github.com/PabloGBarcelo/vue-fix-ionic/tree/master/test-ionic

Thanks!

[saviilsy]

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 :)

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

[PabloGBarcelo]

Thanks for resolve my problem.
Vue documentation its a bit confusing in this component, can you add this example (with ion-split-pane) for people if its possible.
I will update my repo with right way.

Thanks for your time!

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