When add to my page, all buttons stop working

Question

I decided to put a side menu in my page, following the documentation I should insert the <ion-router-outlet> tag in this page or else the menu won't activate. The problem is, when I insert this tag all my buttons don't work anymore. Neither the click function nor the button click animation work.

I was originally using <ion-menu-button tag to toggle the menu, so I tried to toggle by the function: menuController.toggle(), but this don't work and even so I need the <ion-router-outlet> to activate the menu.

Without the tag I receive an error:

Menu: must have a "content" element to listen for drag events on.

My code:

<ion-content>
    <ion-menu side="end">
        <ion-header>
            <ion-toolbar color="primary">
                <ion-title>Menu</ion-title>
            </ion-toolbar>
        </ion-header>
        <ion-content>
            <ion-list>
                <ion-item *ngIf="userAccess == 'all'" href="randomHrefLink" target="_blank">
                    randomMenuItem
                </ion-item>
            </ion-list>
        </ion-content>
    </ion-menu>

    <ion-list>  

        <ion-item *ngIf="userAccess == 'all' || userAccess == 'randomItem'">
            <ion-thumbnail slot="start">
                <img src="assets/thumbs/randomThumbnail.jpg">
            </ion-thumbnail>
            <ion-label>
                <h2>randomItem</h2>
                <p>randomDate</p>
            </ion-label>        
            <ion-button clear slot="end" (click)="randomFunction();">buttonWithProblem</ion-button>
        </ion-item>

        ...

        <ion-router-outlet main></ion-router-outlet>

    </ion-list>

</ion-content>

---

Additional information:

• There is another page with the <ion-router-outlet main> and other menus, I tried to remove them, but everything remains the same. In this same page I tried to replicate the problem, I added a button with some random function just to see if this problem was in one page alone or in all of them. Sadly this same bug happened in that page too;
• Some click functions work inside the menu, only the outside buttons don't;
• Tried to add a menuId attribute to the <ion-menu> tag, but nothing changed too;
• Tried to implement the (click) function in the tag, didn't work too;
• Based on this answer, I tried to add a contentId attribute in the <ion-menu> tag and refer this to the <ion-router-outlet>, nothing changed;
• With this other answer I can see the previous error reason, but could not identify the why the buttons/functions are not working;
• Tried this suggestion in a related SO answer, but can't see any difference also.
• I created a stackblitz to reproduce this problem more easily, but to my frustration it worked fine there. (The menu icon is not showing in the top right corner, but it's working. I got an ionic 4 template online, so ignore the other pages). So I see that this problem is happening only in my project, if anyone have an ideia why please comment.
• I tried to recreate this problem in other project, same Ionic version, but the problem occurred there too.
• Tested in Android and browser

---

System info:

• Ionic CLI : 5.4.4

• NodeJS : v10.16.3

Answer 1

I couldn't solve this problem, but I achieved the same goal using Ionic's Action Sheet.

Ex:

async function presentActionSheet() {

  const actionSheet = document.createElement('ion-action-sheet');

  actionSheet.header = "Albums";
  actionSheet.buttons = [{
    text: 'Delete',
    role: 'destructive',
    icon: 'trash',
    handler: () => {
      console.log('Delete clicked');
    }
  }, {
    text: 'Share',
    icon: 'share',
    handler: () => {
      console.log('Share clicked');
    }
  }, {
    text: 'Play (open modal)',
    icon: 'arrow-dropright-circle',
    handler: () => {
      console.log('Play clicked');
    }
  }, {
    text: 'Favorite',
    icon: 'heart',
    handler: () => {
      console.log('Favorite clicked');
    }
  }, {
    text: 'Cancel',
    icon: 'close',
    role: 'cancel',
    handler: () => {
      console.log('Cancel clicked');
    }
  }];
  document.body.appendChild(actionSheet);
  return actionSheet.present();
}