fix: Memory leak in FluentSelect component

[jamesminchin]

🐛 Bug Report

I am experiencing a memory leak issue with FluentSelect. I have a FluentSelect within a component on a page. Each time I change the component parameters the browser memory usage increases, and it does not go down again.

💻 Repro or Code Sample

BlazorMemory.zip

Run the attached project. Open the Browser task manager, view the memory for the project. Repeatedly click the Next button on the web page (e.g. hold down enter key) and observe number on the page changing, and the browser memory used keeps increasing. After a few hundred presses the memory has increased by hundreds of megabytes, and does not go down again.

In the Student.razor page I have also included a commented out section using InputSelect. If that is enabled instead of FluentSelect you can see the memory issue does not occur.

🤔 Expected Behavior

Memory used should not keep increasing without limit.

😯 Current Behavior

Memory used increases each time the component parameters change, and never decreases or stabilises.

💁 Possible Solution

I do not know the cause.

🔦 Context

This is used in a production site and is causing the browser to slow down and eventually crash.

🌍 Your Environment

• Windows 11
• Microsoft Edge
• .Net 8
• Fluent UI 4.11.2

[vnbaaij]

Hi,

I don't want to dismiss your issue, but we only only support the latest released version of the library (currently v4.11.9).

Please upgrade and test with that version first and let us know if the issue is then still there. We will investigate then.

This is our normal procedure and as there have been a lot of changes to the Select since v4.11.2, it is even more applicable now.

[jamesminchin]

Of course, that makes sense. Here is my sample with the latest release, still exhibiting the same issue.

BlazorMemory-4-11-9.zip

[pk9r]

Hi, I have looked into this issue and done some testing. It seems that FluentSelect after being removed from rendering, does not free up memory well (on the browser side).

On FluentSelect with Items as Empty, this happens. Even FluentButton has this issue.

Sorry I don't have a ready to run on this report, it's pretty simple to reproduce so I'm not sure this is necessary. However if you really need it I will prepare it later.

[pk9r]

@vnbaaij I'm thinking that maybe the problem comes from fast component. However I don't know how to create a project to confirm this.

[pk9r]

@vnbaaij I'm thinking that maybe the problem comes from fast component. However I don't know how to create a project to confirm this.

[vnbaaij]

I think this comes from the underlying web components too.
As the version we use now will not be updated anymore, we don't really have a way to fix this for v4.
I'll mark this as a v5 issue, so we can benchmark against the new web components.