Virtualized DataGrid: opening Base‑UI MenuTrigger causes full grid re-render (Radix works fine)

[7up-charsi]

When using a virtualized DataGrid (virtua WindowVirtualizer/Virtualizer) and Base‑UI Menu (MenuTrigger / DropdownMenu), clicking a row's menu trigger causes the entire data grid to re-render/remount rows. Using Radix UI for the same menu does not produce the issue. The menu content is portaled, so the overlay mount itself is not the cause.

Observed behavior

Virtualized grid re-renders/remounts whole data-grid when a row action menu is toggled with Base‑UI menu.

xpected behavior

Nothing in the data-grid DOM should update. Menu should not cause parent/virtualizer to remount unrelated rows (same behavior as Radix).

Request

please advise on a minimal example showing safe use with virtua WindowVirtualization.

DropdownMenu / Menu usage

Radix: https://github.com/user-attachments/assets/88a09d6a-a402-47b5-9302-ebc2051fd5a2
Base-ui: https://github.com/user-attachments/assets/a4f1a730-e364-45ea-8cc1-448e31ac2507

[atomiks]

@7up-charsi can you provide a code reproduction? A screen recording isn't helpful for us in this case

The Menu's state is self-contained and doesn't cause parents to re-render, so I'm not sure why it would this would happen without some code to look at.

Menu (and others like Popover) inject visually-hidden elements after the trigger which could be interfering:

Does wrapping <Menu.Trigger> in a parent <div> help so these elements get injected into a parent? The elements also use position: fixed, so contain: layout CSS on that parent <div> could also be necessary. But I'm not sure if this is related - it's one thing we do differently to Radix though in the DOM

[7up-charsi]

hi @atomiks , thx for your precious time. Point is, it only happens in virtualized data gird. i tried both radix and base-ui with and without virtua and @tanstack/react-virtual, radix works with both and base-ui does not work with either.

i think its due to data-base-ui-inert attr that on Menu open base-ui adds on maybe each DOM node and WindowVirtualizer thinks its new element and remounts every row ( i inspected DOM and radix-ui does not add any attr on each DOM node ). due to data-base-ui-inert on maybe each DOM node, react dev tool highlights every updated DOM.

if i use React.memo with tr and td and cache some other functions, then WindowVirtualizer does not remounts and base-ui Menu works.

[7up-charsi]

Hi @atomiks

Last night I thought data-base-ui-inert was the culprit, but it turns out that setting modal={false} on Base UI’s Menu and Dialog also resolves the issue.

[atomiks]

The modal prop creates the scroll lock, and also renders an internal backdrop element behind the menu that covers the whole screen to block pointer events. Without a code reproduction though, it's hard to know exactly why either of those causes an issue