Ion-split-pane does not allow click (Ionic)

Question

I have an application in Ionic that has a menu, however eventually this menu hangs and I can not click on the screen inputs. So I went to debug the application the perception that when this happens the application creates an extra component on the screen, observe:

NORMAL

MISTAKENLY

The code I made for that was:

import { Component, OnInit } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { Platform } from '@ionic/angular';
import { Router } from '@angular/router';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { UserService } from './services/user.service';
import { AuthService } from './services/auth.service';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent implements OnInit {
  public appPages = [
    { title: 'Home', url: '/home', icon: '/assets/graph-icon.svg' },
    { title: 'Perfil', url: '/profile', icon: '/assets/profile2.svg' },
    { title: 'Perfil de saúde', url: '/health-profile', icon: '/assets/profile.svg' },
    { title: 'Passos', url: '/exercises', icon: '/assets/shoe-icon.svg' },
    { title: 'Água', url: '/water', icon: '/assets/water-icon.svg' },
    { title: 'Receitas', url: '/recipes', icon: '/assets/fruit-icon.svg' },
    { title: 'Desafios', url: '/campaign', icon: '/assets/paper-icon.svg' },
    { title: 'Conquistas', url: '/achievements', icon: '/assets/trofhy-icon.svg' },
    { title: 'Sair', icon: '/assets/logout.svg', onClick: () => this.logout() },
  ];

  public showMenu = false;

  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private translate: TranslateService,
    private router: Router,
    public userService: UserService,
    public authService: AuthService,
  ) {
    this.translate.setDefaultLang('pt-BR');
    this.translate.use('pt-BR');

    this.initializeApp();
  }

  ngOnInit() {
    this.userService.state$.subscribe(state => {
      this.showMenu = UserService.isAuthenticated(state) &&
        UserService.isComplete(state) &&
        !UserService.showWelcome(state);
    });
  }

  logout() {
    this.userService.clear();
    this.showMenu = false;
    this.userService.load().then((state) => {
      this.authService.rootRedirect(state);
    });
  }

  private initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
      this.userService.load()
        .then((state) => {
          this.authService.rootRedirect(state);
        });
    });
  }
}

html:

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<ion-app>
  <ion-split-pane contentId="main-content">
    <ion-menu type="overlay" content-id="main-content" *ngIf="showMenu">
      <ion-content>
        <app-main-menu [pages]=appPages></app-main-menu>
      </ion-content>
    </ion-menu>
    <ion-router-outlet id="main-content"></ion-router-outlet>
  </ion-split-pane>
</ion-app>

Answer 1

I found the answer on this link: https://github.com/ionic-team/ionic/issues/19727

.menu-content-open {
pointer-events: unset !important;
}

.menu-content.menu-content-open {
z-index: 20;
}

The second option can be used if you find the z-index behind the main menu component.