Can't get mat-expansion-panel to open in Ionic 5

Ionic Framework
1

I am unable to expand a mat-expansion-panel component within an Ionic 5 application.

I have template code as follows

<ion-header>
  <ion-toolbar>
    <ion-title>Jounral Entries</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <mat-accordion multi disabled="false">
    <mat-expansion-panel *ngFor="let jEntry of journalEntries$ | async" (opened)="handleOpen()" (closed)="handleClosed()" disabled="false">
      <mat-expansion-panel-header disabled="false">
        {{jEntry.name}}
      </mat-expansion-panel-header>
      <div>we got some content</div>
    </mat-expansion-panel>
  </mat-accordion>
  <!-- <mat-accordion clickable>
    <mat-expansion-panel hideToggle>
      <mat-expansion-panel-header>
        <mat-panel-title>
          This is the expansion title
        </mat-panel-title>
        <mat-panel-description>
          This is a summary of the content
        </mat-panel-description>
      </mat-expansion-panel-header>
      <p>This is the primary content of the panel.</p>
    </mat-expansion-panel>
    <mat-expansion-panel (opened)="panelOpenState = true"
                         (closed)="panelOpenState = false">
      <mat-expansion-panel-header>
        <mat-panel-title>
          Self aware panel
        </mat-panel-title>
        <mat-panel-description>
          Currently I am {{panelOpenState ? 'open' : 'closed'}}
        </mat-panel-description>
      </mat-expansion-panel-header>
      <p>I'm visible because I am open</p>
    </mat-expansion-panel>
  </mat-accordion> -->
</ion-content>

I’ve commented out code that comes straight from the angular documentation page as I also tried to use theirs to see if I had anything wrong, and theirs will not work either. The expansion panel does show up and the header content is there, but it isn’t clickable, and the cursor doesn’t turn to the hand like it should for a button and when clicked, the expansion panel doesn’t open.

The module that contains the component displaying the expansion panel:

@NgModule({
  imports: [
    CommonModule,
    SharedModule,
    JournalRoutingModule
  ],
  declarations: [JournalComponent]
})

And SharedModule exports MatExpansionModule. As mentioned it does show up, it just won’t open.

enter image description here

I’ve also found this page that shows pretty much what I’m doing so I can’t figure out what it is

https://www.freakyjolly.com/ionic-angular-material-how-to-install-material-and-use-its-components-in-ionic-app/#.Xv9KVShKhZc

I also created a basic standalone angular app using ng new, added material to it and added the expansion panel, and it does work there, so it is specific to Ionic 5

2

I’m adding a bit more information. I’ve added some click event binding to some of my elements simply to see where clicks are or are not being handled. My application is layed out like so:

Main AppComponent.html

<ion-app>
  <ion-header>
    <ion-toolbar>
      <ion-title>
        Foundry Companion
        <span
          *ngIf="user$ | async as user"
          [ngStyle]="{ 'color': user.color }">
          ({{user.name}})
        </span>
      </ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content (click)="handleClicked()">
    <app-apps-menu *ngIf="user$ | async" slot="fixed"></app-apps-menu>
    <ion-router-outlet></ion-router-outlet>
  </ion-content>
</ion-app>

The click handler here on the ion-content is being triggered and I get a console log when it happens.

Inside of the ion-router-outlet are my my main routes then such as localhost:8100/login then is

Here is my LoginComponent located at the /login route and the click handler here is also properly logged.

<ion-content (click)="onClick()">
  <div fxLayout="row" fxLayoutAlign="space-around center" style="height: 100%;">
    <ion-item *ngIf="(userList$ | async).length > 0 else noUsers" class="token-entry" slot="fixed">
      <ion-label position="floating">Enter Token</ion-label>
      <ion-input #input (keydown)="handleSubmit($event, input.value)" maxlength="4" clearInput type="text"></ion-input>
    </ion-item>
    <ng-template #noUsers>
      <p>There are no users logged into the Foundry instance. Please log in and retrieve your token.</p>
    </ng-template>
  </div>
</ion-content>

However, after we login it routes to /home and this click handler here is not logged.

<ion-content (click)="onClick()">
  <ion-label
    *ngIf="(socketService.connected$ | async) === false"
    style="width: 100%; text-align: center;"
    color="primary">
      NOT CONNECTED
    </ion-label>
</ion-content>

The only difference I can see is that the ion-router-outlet keeps the views in the html so that it can animate them in and out, but the login view has a lower z-index and display: none so it shouldn’t be affecting any click handlers. And the AppComponent click handler is still be handled properly as well.

If I change around the order that the routes happen so that you can go to the /home route first then I get the click listeners on whichever page is routed to first, but then any other route no longer gets those click events.

It appears that only the first route ever receives click events. If i make the route that contains the accordion the first route then the accordion works.

3

So after all that, it turns out it was because of an ion-fab that had slot=“fixed”. This made that ion-fab take up 100% of the screen size and was blocking clicks…