Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

bug(tooltip): hydration error inside MatSidenav #30515

Closed
1 task
ivibe opened this issue Feb 19, 2025 · 1 comment
Closed
1 task

bug(tooltip): hydration error inside MatSidenav #30515

ivibe opened this issue Feb 19, 2025 · 1 comment
Labels
needs triage This issue needs to be triaged by the team

Comments

@ivibe
Copy link

ivibe commented Feb 19, 2025

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

No response

Description

In project with hydration hovering an element with matTooltip that is inside a MatSidenav component leads to an error

Error: ASSERTION ERROR: Unexpected state: no hydration info available for a given TNode, which represents a view container. [Expected=> null != undefined <=Actual]
    at throwError2 (core.mjs:528:9)
    at assertDefined (core.mjs:524:5)
    at populateDehydratedViewsInLContainerImpl (core.mjs:17890:16)
    at locateOrCreateAnchorNode (core.mjs:17906:8)
    at createContainerRef (core.mjs:17808:3)
    at injectViewContainerRef (core.mjs:17581:10)
    at core.mjs:5148:19
    at runInInjectorProfilerContext (core.mjs:879:5)
    at lookupTokenUsingNodeInjector (core.mjs:5147:9)
    at getOrCreateInjectable (core.mjs:5116:19)

Reproduction

StackBlitz link: AFAIK StackBlitz doesn't support SSR
Steps to reproduce:

  1. app.config.ts
export const appConfig: ApplicationConfig = {
  providers: [
    provideClientHydration(withEventReplay()),
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(appRoutes),
  ],
};
  1. app.component.ts
@Component({
  imports: [MatTooltipModule, MatSidenavModule],
  selector: 'app-root',
  template: `
    <mat-drawer-container class="example-container">
      <mat-drawer mode="side" opened>Drawer content</mat-drawer>
      <mat-drawer-content>
        <div matTooltip="Hello">Hello</div>
      </mat-drawer-content>
    </mat-drawer-container>
  `,
})
export class AppComponent {}
  1. Hover div element

Expected Behavior

Tooltip should appear

Actual Behavior

ASSERTION ERROR: Unexpected state: no hydration info available for a given TNode, which represents a view container. [Expected=> null != undefined <=Actual]

Environment

Angular CLI: 19.1.7
Node: 22.11.0
Package Manager: pnpm 9.15.5
OS: linux x64

Angular: 19.1.6
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router

Package Version

@angular-devkit/architect 0.1901.7 (cli-only)
@angular-devkit/build-angular 19.1.7
@angular-devkit/core 19.1.7
@angular-devkit/schematics 19.1.7
@angular/cdk 19.1.4
@angular/cli 19.1.7
@angular/material 19.1.4
@angular/material-luxon-adapter 19.1.4
@angular/ssr 19.1.7
@schematics/angular 19.1.7
rxjs 7.8.1
typescript 5.7.3
webpack 5.98.0
zone.js 0.15.0

@ivibe ivibe added the needs triage This issue needs to be triaged by the team label Feb 19, 2025
@crisbeto
Copy link
Member

Will be fixed by #30500 in the release later today.

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
needs triage This issue needs to be triaged by the team
Projects
None yet
Development

No branches or pull requests

2 participants