[DataGridPro] Do not render detail panel if the focused cell is not v…

…isible (#13456)

packages/x-data-grid-pro/src/tests/detailPanel.DataGridPro.test.tsx

@@ -501,6 +501,29 @@ describe('<DataGridPro /> - Detail panel', () => {
     expect(screen.getByTestId(`detail-panel-content`).textContent).to.equal(`${counter}`);
   });
 
+  it("should not render detail panel for the focused row if it's outside of the viewport", function test() {
+    if (isJSDOM) {
+      this.skip(); // Needs layout
+    }
+    render(
+      <TestCase
+        getDetailPanelHeight={() => 50}
+        getDetailPanelContent={() => <div />}
+        rowBufferPx={0}
+        nbRows={20}
+      />,
+    );
+
+    userEvent.mousePress(screen.getAllByRole('button', { name: 'Expand' })[0]);
+
+    const virtualScroller = document.querySelector(`.${gridClasses.virtualScroller}`)!;
+    virtualScroller.scrollTop = 500;
+    act(() => virtualScroller.dispatchEvent(new Event('scroll')));
+
+    const detailPanels = document.querySelectorAll(`.${gridClasses.detailPanel}`);
+    expect(detailPanels.length).to.equal(0);
+  });
+
   describe('prop: onDetailPanelsExpandedRowIds', () => {
     it('should call when a row is expanded or closed', () => {
       const handleDetailPanelsExpandedRowIdsChange = spy();

packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx

@@ -490,6 +490,10 @@ export const useGridVirtualScroller = () => {
         />,
       );
 
+      if (isNotVisible) {
+        return;
+      }
+
       const panel = panels.get(id);
       if (panel) {
         rows.push(panel);