FluentDataGrid spawning new lots of divs for .resize-handler - height is sticky

[RichEdwards26]

🐛 Bug Report & Context

In my application I provide the option to increase and decrease the number of rows displayed in a FluentDataGrid.

My issue is: After I increase the number of rows, then decreasing the number of rows i'm left with dead white-scroll space.

While trying to create minimal reproducible code - I think I found the cause. The new resize handler spawns new divs for the updated height with a sticky fixed height value. When decreasing the rows, these old handlers (with bigger height) are not removed causing the page to create this white-scrolling space.

This is my issue on a single image:

💻 Repro or Code Sample

I think the same concept is visible on the demo page: https://www.fluentui-blazor.net/datagrid-typical
It looks like the resize.handler is spawning new divs for every page change via the pagination.

🤔 Expected Behaviour

I see this spawning new divs per column per page. Big tables will generate a lot if not removed.

Remove the old div/handler(s) when no longer needed?

😯 Current Behaviour

From the demo page.

This is the resize hander upon entry. Just one div.

With the pagination controls in the bottom right, go to page 2, you get a new div added and old not removed:

go back to page 2, you get another new div added:

And so on. every column's handler gets a new div every time you change page.

Finally - if i simulate my issue but updating the height on the middle div we create the white scroll space:

🌍 Your Environment

• Windows 11
• Chrome Version 138.0.7204.51 (Official Build) (64-bit)
• Fluent UI 4.12.0
• net9.0

[vnbaaij]

This is already addressed in v4.12.1. See js code in PR #3903