Memory Leak in mat-select Component

[Emil-Blomquist]

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

I have identified a potential memory leak related to the mat-select component in Angular Material. Each time I interact with the mat-select component and navigate to a different page, the number of detached elements increases.

Reproduction

StackBlitz link: https://stackblitz.com/edit/stackblitz-starters-qufh72?file=src%2Fcomponents%2Fa%2Fa.component.css

Steps to Reproduce:

1. Start at Component B.
2. Navigate to Component A.
3. Interact Component A's mat-select (simply open it and then have it closed)
4. Navigate back to Component B.

Observed Behavior:

• Each time the above steps are repeated, a pair of detached elements (the host element of Component A and a cdk-overlay div) is created.
• Repeating this process N times results in N pairs of detached elements.
• Below is included a screen grab of Edge's Detached Element development tool below for the case N = 3

Impact:

• While the memory impact may be minimal, it complicates debugging in complex applications due to the accumulation of small leaks.

Expected Behavior

• Navigating between components and interacting with the mat-select should not result in any detached elements.

Actual Behavior

• Each time the above steps are repeated, a pair of detached elements (the host element of Component A and a cdk-overlay div) is created.
• Repeating this process N times results in N pairs of detached elements.

Environment

Angular CLI: 18.2.3
Node: 20.16.0
Package Manager: npm 10.8.1
OS: linux x64

Angular: 18.2.3
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, material, platform-browser, router

Package Version

@angular-devkit/architect 0.1802.3
@angular-devkit/build-angular 18.2.3
@angular-devkit/core 18.2.3
@angular-devkit/schematics 18.2.3
@schematics/angular 18.2.3
rxjs 7.8.1
typescript 5.5.4
zone.js 0.14.10

[jingglang]

I bet this is related to #29696. It also happens for MatMenu and MatAutocomplete

[crisbeto]

Rolling this into #29696.

[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.}