Components: After upgrading to Angular7 mat-paginator tooltip throws error in console

[larisaVasile]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Do not throw error.

What is the current behavior?

TooltipComponent.html:1 ERROR TypeError: Cannot read property 'matches' of null
at Object.eval [as updateRenderer] (TooltipComponent.html:1)
at Object.debugUpdateRenderer [as updateRenderer] (core.js:20458)
at checkAndUpdateView (core.js:19833)
at callViewAction (core.js:20069)
at execComponentViewsAction (core.js:20011)
at checkAndUpdateView (core.js:19834)
at callViewAction (core.js:20069)
at execEmbeddedViewsAction (core.js:20032)
at checkAndUpdateView (core.js:19829)
at callViewAction (core.js:20069)

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue.

StackBlitz starter: https://goo.gl/wwnhMV

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Is there anything else we should know?

[ovidiugiorgi]

I tried reproducing the issue on StackBlitz, but it seems to work fine. You can see under dependencies that it uses angular 7 packages.

[ouassimBenMosbah]

I faced the same issue. I was able to reproduce it on the stackblitz below
stackBlitz

I had to use the version 6.4.7 of @angular/material to reproduce this bug

[jotatoledo]

@ouassimBenMosbah your dependencies are wrong, material is outdated in your blitz

[josephperrott]

Can you provide a reproduction in StackBlitz. This will help us to investigate the issue you are seeing.

[r0maks]

Here's a Stack overflow thread of the issue described: https://stackoverflow.com/questions/53434382/angular-material-2-tooltip-issue

I too am having this issue. Error gets spit out onto the console when hovering over a tooltip after updating angular cdk to 7.1.1 from 6.4.6

[cyberbeast]

Is there a fix for this in the works?

ERROR TypeError: Cannot read property 'matches' of null

[manklu]

@cyberbeast Do you have a working reproduction?

[houssemFat-DDF]

Same issue when i do hover the next page button

 <mat-paginator
        [pageSize]="pageLimit"
        [pageIndex]="currentPageIndex"
        [pageSizeOptions]="[5, 10, 25, 100]"
        [length]="list.length"
        (page)="updatePagination($event)">
      </mat-paginator>

*Package json dependencies *

"dependencies": {
    "@angular/animations": "^6.1.10",
    "@angular/cdk": "^7.3.1",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/flex-layout": "6.0.0-beta.17",
    "@angular/forms": "^6.1.0",
    "@angular/http": "^6.1.0",
    "@angular/material": "^6.1.0",
    "@angular/platform-browser": "^6.1.0",
    "@angular/platform-browser-dynamic": "^6.1.0",
    "@angular/router": "^6.1.0",
    "@ngx-translate/core": "^9.1.1",
    "@ngx-translate/http-loader": "^2.0.1",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.5.4",
    "moment": "^2.22.2",
    "rxjs": "6.1.0",
    "rxjs-compat": "6.1.0",
    "sortablejs": "^1.8.1",
    "web-animations-js": "^2.3.1",
    "zone.js": "^0.8.26"
  },

[asheikabrar]

same error any fix , is that something to do with using *ngIf

[karamuka]

Same here!

[NeWbLt123]

Upgrading @angular/material to 7.3.3 fixed the problem for me.

[nick-beers]

I found somewhere online that @angular/material and @angular/cdk should be always pulling similar versions. Originally my cdk was using ^7.3.7 as the version and material was using ~7.3.7, so I made them both use ^7.3.7, re-pulled node_modules and everything appeared to resolve. It may be related to mismatching versions, but I didn't end up doing a full investigation into why that might have been my issue.

[jayabal206]

For me also having the same issue when hovering the material table pagination a next page arrow icons "The same issue when I do hover the next page button"

Finally, I fixed this issue. Below mentioned how I fixed this issue.

1. I checked my package.json file in the version of cdk and material is mismatched
   "@angular/cdk": "^7.3.2", "@angular/material":"^6.4.2"

2. The "angular/cdk" version is higher than angular/material. So first I changed the cdk version
   "@angular/cdk": "^7.3.2" to "@angular/cdk": "^6.4.2"

3. After changing the version in the "package.json" file in my terminal reinstall the cdk version using this command npm i @angular/cdk without mentioned any version. It will be installing @angular/[email protected] version after the update. The console error " Cannot read property 'matches' of null" will not come. Working fine for me.

Please follow this and share your comments. Thanks.

[andrewseguin]

Sounds like matching versions fixed this - if an issue persists, please open a new issue with a reproduction. Thanks!

[angular-automatic-lock-bot[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._}