Skip to content

Button not enabled in mat-list #26029

Closed
Closed
@ianfmc

Description

@ianfmc

Is this a regression?

  • Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

14.2.9

Description

Unable to tap button in mat-list (with role of 'list') see code below.

<div class="contacts-container">
  <h2>My Connections</h2>
  <h3>Add, change, or delete any connections you want to send future messages</h3>
  <div class="list-container">
    <mat-list role="list">
      <cdk-virtual-scroll-viewport [itemSize]="100" class="example-viewport">
        <mat-list-item *cdkVirtualFor="let contact of contacts">
          <span matListItemTitle class="item-title">{{contact.name}}</span>
          <span matListItemLine class="item">{{contact.email}}</span>
          <span matListItemLine class="item">{{contact.relationship}}</span>
          <button matListItemMeta mat-icon-button class="material-icons-outlined" (click)="onItemSelected(contact)"
            [matMenuTriggerFor]="itemMenu">
            <mat-icon>
              more_vert
            </mat-icon>
          </button>
        </mat-list-item>
      </cdk-virtual-scroll-viewport>
    </mat-list>
    <mat-menu #itemMenu="matMenu">
      <button mat-menu-item (click)="onListItemPressed()">
        <mat-icon class="material-icons-outlined" color="primary">info</mat-icon>Related Events
      </button>
      <button mat-menu-item (click)="onEditContactPressed()">
        <mat-icon class="material-icons-outlined" color="primary">edit</mat-icon>Edit
      </button>
      <button mat-menu-item (click)="onDeleteContactPressed()">
        <mat-icon class="material-icons-outlined" color="warn">clear</mat-icon>Delete
      </button>
    </mat-menu>
  </div>
  <div class="button-container">
    <button mat-raised-button color="accent" (click)="onAddNewPressed()">Add New</button>
  </div>
</div>

Reproduction

Steps to reproduce:

  1. Run code above
  2. Try to tap button (mat-icon-button is shown, but not enabled)

Expected Behavior

Should be able to tap button and have menu appear

Actual Behavior

Unable to tap button. Menu does not (of course) appear

Environment

  • Angular: 15.0.0
  • CDK/Material: 15.0.0
  • Browser(s): Chrome Version 107.0.5304.110 (Official Build) (x86_64)
  • Operating System (e.g. Windows, macOS, Ubuntu): MacOS 12.5.2
Angular CLI: 15.0.0
Node: 16.11.0
Package Manager: npm 8.0.0
OS: darwin x64

Angular: 15.0.0
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, language-service, material, platform-browser
... platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1500.0
@angular-devkit/build-angular   15.0.0
@angular-devkit/core            15.0.0
@angular-devkit/schematics      15.0.0
@schematics/angular             15.0.0
rxjs                            7.5.7
typescript                      4.8.4

Metadata

Metadata

Assignees

Labels

P2The issue is important to a large percentage of users, with a workaroundarea: material/listregressionThis issue is related to a regression

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions