bug([mat-tooltip]): [high performance problem - tooltip triggers the whole page to render]

[woteska]

Reproduction

https://stackblitz.com/edit/components-issue-tvhzdk

1. Open DevTools
2. Hover the buttons and check Console

Try it out with Paint Flashing dev tool locally (it will not work on StackBlitz).

Expected Behavior

Should not trigger independent parts of the application to be rendered.

Actual Behavior

Casues high performace issues if you have a more complex app than the example.

Environment

• Browser(s): Chrome latest
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 10 latest

{
  "name": "xxx",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~9.1.6",
    "@angular/cdk": "^9.2.3",
    "@angular/common": "~9.1.6",
    "@angular/compiler": "~9.1.6",
    "@angular/core": "~9.1.6",
    "@angular/forms": "~9.1.6",
    "@angular/material": "^9.2.3",
    "@angular/platform-browser": "~9.1.6",
    "@angular/platform-browser-dynamic": "~9.1.6",
    "@angular/router": "~9.1.6",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.901.5",
    "@angular/cli": "~9.1.5",
    "@angular/compiler-cli": "~9.1.6",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~3.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "~5.4.3",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.8.3",
  }
}

Notes:

• The mat-sort-header also do the same.
• Bootstrap tooltip works perfectly, without any rendering/performance issues.

[trik]

@woteska i don't think it's related to the mat-tooltip or the mat-sort-header but rather to the way you defined the ngFor cycle.. since you are iterating over the result of a function call that returns a new array, even if the data is the same the identities of elements are different, forcing to call the function at every cycle. if you try to wrap you generator in a pure pipe you won't have the same problem
https://stackblitz.com/edit/components-issue-tvhzdk

[woteska]

@woteska i don't think it's related to the mat-tooltip or the mat-sort-header but rather to the way you defined the ngFor cycle.. since you are iterating over the result of a function call that returns a new array, even if the data is the same the identities of elements are different, forcing to call the function at every cycle. if you try to wrap you generator in a pure pipe you won't have the same problem
https://stackblitz.com/edit/components-issue-tvhzdk

Your link is probably wrong.

I see, but it is just an example in which you can see that tooltip appearing triggers independent elements to render and render again. Why? It is a feature?

Try it out using paint flashing feature of devtools to see that it triggers other elements as well: https://ibb.co/DMt9B34

<div *ngIf="tables.length; else noDiscoveredDevicesFoundCard">

  <ng-container *ngIf="config.isButtonSectionVisible">
    <div>
      <div>
        <ng-container *ngTemplateOutlet="buttonSection"></ng-container>
      </div>
    </div>
  </ng-container>

  <mat-accordion [multi]="true">
    <mat-expansion-panel *ngFor="let table of tables" [expanded]="true">

      <mat-expansion-panel-header>
        <mat-panel-title>
          <button (click)="multiDeviceEdit('group', table.group)"
                  *ngIf="config.buttons.multiDeviceEdit.isVisible"
                  [matTooltip]="'Multi Device Edit'"
                  mat-icon-button>
            <mat-icon>edit</mat-icon>
          </button>
          {{table.group | groupText}}
          <mat-icon *ngIf="table.dataSource.filteredData.length !== table.dataSource.data.length"
                    [matTooltip]="'This group is affected by filter, only filtered devices are shown.'">filter_list
          </mat-icon>
        </mat-panel-title>
      </mat-expansion-panel-header>

      <div>
        <table [dataSource]="table.dataSource" mat-table matSort>

          <ng-container matColumnDef="select">
            <th *matHeaderCellDef mat-header-cell>
              <mat-checkbox
                (change)="masterToggleSelectedMacAddressesInGroup(table.group)"
                [checked]="(selectedMacAddressesStatusInGroup$(table.group) | async) === 'all'"
                [indeterminate]="(selectedMacAddressesStatusInGroup$(table.group) | async) === 'some'">
              </mat-checkbox>
            </th>
            <td *matCellDef="let element" mat-cell>
              <mat-checkbox (change)="toggleSelectedMacAddress(element.macAddress)"
                            [checked]="isMacAddressSelected$(element.macAddress) | async">
              </mat-checkbox>
            </td>
          </ng-container>

          <ng-container matColumnDef="actions">
            <th *matHeaderCellDef mat-header-cell>Actions</th>
            <td *matCellDef="let element" mat-cell>
              <div>
                <button (click)="openSingleDeviceEditDialog(element)" [matTooltip]="'Single Device Edit'"
                        mat-icon-button>
                  <mat-icon>edit</mat-icon>
                </button>
                <flash [macAddress]="element.macAddress"></flash>
                <button (click)="openRebootDialog(element)" [matTooltip]="'Reboot'" mat-icon-button>
                  <mat-icon>replay</mat-icon>
                </button>
              </div>
            </td>
          </ng-container>

          <ng-container matColumnDef="isPrimary">
            <th *matHeaderCellDef mat-header-cell mat-sort-header>Primary</th>
            <td *matCellDef="let element" mat-cell>
              <mat-icon *ngIf="element.isPrimary">check</mat-icon>
            </td>
          </ng-container>

          <ng-container matColumnDef="name">
            <th *matHeaderCellDef mat-header-cell mat-sort-header>Name</th>
            <td *matCellDef="let element" mat-cell>{{element.name}}</td>
          </ng-container>

          <ng-container matColumnDef="type">
            <th *matHeaderCellDef mat-header-cell mat-sort-header>Type</th>
            <td *matCellDef="let element" mat-cell>{{element.type | deviceTypeText}}</td>
          </ng-container>

          <ng-container matColumnDef="macAddress">
            <th *matHeaderCellDef mat-header-cell mat-sort-header>MAC Address</th>
            <td *matCellDef="let element" mat-cell>{{element.macAddress}}</td>
          </ng-container>

          <ng-container matColumnDef="firmwareVersion">
            <th *matHeaderCellDef mat-header-cell mat-sort-header>Firmware Version</th>
            <td *matCellDef="let element" mat-cell>{{element.firmwareVersion}}</td>
          </ng-container>

          <ng-container matColumnDef="isDhcpBased">
            <th *matHeaderCellDef mat-header-cell mat-sort-header>Address Type</th>
            <td *matCellDef="let element" mat-cell>
              {{element.networkSettings.isDhcpBased ? 'DHCP' : 'Static'}}
            </td>
          </ng-container>

          <ng-container matColumnDef="sourceIpAddress">
            <th *matHeaderCellDef mat-header-cell mat-sort-header>IP Address</th>
            <td *matCellDef="let element" mat-cell>{{element.sourceIpAddress}}
              {{(element.sourceIpAddress !== element.networkSettings.ipAddress) ?
                ' (' + element.networkSettings.ipAddress + ')' : ''}}
            </td>
          </ng-container>

          <ng-container matColumnDef="subNetMask">
            <th *matHeaderCellDef mat-header-cell mat-sort-header>Subnet Mask</th>
            <td *matCellDef="let element" mat-cell>{{element.networkSettings.subNetMask}}</td>
          </ng-container>

          <ng-container matColumnDef="gateway">
            <th *matHeaderCellDef mat-header-cell mat-sort-header>Gateway</th>
            <td *matCellDef="let element" mat-cell>{{element.networkSettings.gateway}}</td>
          </ng-container>

          <ng-container matColumnDef="sourceNetworkInterface">
            <th *matHeaderCellDef mat-header-cell mat-sort-header>Source Network Interface</th>
            <td *matCellDef="let element" mat-cell>{{element.sourceNetworkInterfaceName}}</td>
          </ng-container>

          <ng-container matColumnDef="state">
            <th *matHeaderCellDef mat-header-cell mat-sort-header>State</th>
            <td *matCellDef="let element" mat-cell>
              <connectivity-state [state]="element.state"></connectivity-state>
            </td>
          </ng-container>

          <ng-container matColumnDef="task">
            <th *matHeaderCellDef mat-header-cell>Task Status</th>
            <td *matCellDef="let element" mat-cell>
              <task-status-by-mac-address-badge
                [macAddress]="element.macAddress"></task-status-by-mac-address-badge>
            </td>
          </ng-container>

          <ng-container matColumnDef="noRecords">
            <td *matFooterCellDef [colSpan]="displayedColumns.length" mat-footer-cell>
              No Devices to show.
            </td>
          </ng-container>

          <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
          <tr *matRowDef="let row; columns: displayedColumns;" mat-row></tr>
          <tr *matFooterRowDef="['noRecords']" [hidden]="!!table.dataSource.filteredData.length" mat-footer-row></tr>
        </table>
      </div>

    </mat-expansion-panel>
  </mat-accordion>

</div>

Material Official website:
https://ibb.co/XXjZw1r
https://ibb.co/fvzXCQT

Bootstrap Official website:
https://ibb.co/RjSR5P3

Probably what I found is a more complex issue with Material.

[trik]

sorry, here the right link https://stackblitz.com/edit/components-issue-3thvyx
in your example you were using the default change detection strategy which forces to evaluate template expressions before and after a browser event.. you should probably switch to the OnPush change detection strategy.. try to have a look at this for further info

[woteska]

@trik , cool, but what about the others I mentioned?

[andrewseguin]

You may be misinterpreting the render of the cdk-overlay-container to be a render of the whole page. When the tooltip appears, the cdk-overlay-container covers the entire page which would cause the whole page to flash green when rendering. This is not an indication that the components on the page are rendering

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}