From 86e82dfb148e748fd3dacfe7d91dbaa9ed988dd1 Mon Sep 17 00:00:00 2001
From: Armin Mehinovic <armin@mui.com>
Date: Thu, 12 Sep 2024 23:09:47 +0200
Subject: [PATCH 1/3] Add test

---
 .../tests/infiniteLoader.DataGridPro.test.tsx | 42 +++++++++++++++++++
 1 file changed, 42 insertions(+)

diff --git a/packages/x-data-grid-pro/src/tests/infiniteLoader.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/infiniteLoader.DataGridPro.test.tsx
index 3c941053e0f1..bb284005320e 100644
--- a/packages/x-data-grid-pro/src/tests/infiniteLoader.DataGridPro.test.tsx
+++ b/packages/x-data-grid-pro/src/tests/infiniteLoader.DataGridPro.test.tsx
@@ -160,4 +160,46 @@ describe('<DataGridPro /> - Infnite loader', () => {
     // should not load more rows because the threshold is not reached
     expect(getRow.callCount).to.equal(5);
   });
+
+  it('should not call `onRowsScrollEnd` if there are rows pinned to the bottom and the viewport scroll is at the top', async function test() {
+    if (isJSDOM) {
+      this.skip(); // Needs layout
+    }
+    const baseRows = [
+      { id: 0, brand: 'Nike' },
+      { id: 1, brand: 'Adidas' },
+      { id: 2, brand: 'Puma' },
+      { id: 3, brand: 'Under Armor' },
+      { id: 4, brand: 'Jordan' },
+      { id: 5, brand: 'Reebok' },
+    ];
+    const pinnedRows = {
+      bottom: [{ id: 6, brand: 'Unbranded' }],
+    };
+    const handleRowsScrollEnd = spy();
+    function TestCase({ rows }: { rows: typeof baseRows }) {
+      return (
+        <div style={{ width: 300, height: 300 }}>
+          <DataGridPro
+            columns={[{ field: 'brand', width: 100 }]}
+            rows={rows}
+            onRowsScrollEnd={handleRowsScrollEnd}
+            pinnedRows={pinnedRows}
+          />
+        </div>
+      );
+    }
+    const { container } = render(<TestCase rows={baseRows} />);
+    const virtualScroller = container.querySelector('.MuiDataGrid-virtualScroller')!;
+    virtualScroller.dispatchEvent(new Event('scroll'));
+    // after initial render and a scroll event that did not reach the bottom of the grid
+    // the `onRowsScrollEnd` should not be called
+    expect(handleRowsScrollEnd.callCount).to.equal(0);
+    // arbitrary number to make sure that the bottom of the grid window is reached.
+    virtualScroller.scrollTop = 12345;
+    virtualScroller.dispatchEvent(new Event('scroll'));
+    await waitFor(() => {
+      expect(handleRowsScrollEnd.callCount).to.equal(1);
+    });
+  });
 });

From b0b0f5961ced9460997a0fc3a8d15dd4b31a1291 Mon Sep 17 00:00:00 2001
From: Armin Mehinovic <armin@mui.com>
Date: Thu, 12 Sep 2024 23:15:02 +0200
Subject: [PATCH 2/3] Infinite loading trigger element only added after last
 content row

---
 .../hooks/features/virtualization/useGridVirtualScroller.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx b/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx
index d986452fabbc..cdb2ca3029df 100644
--- a/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx
+++ b/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx
@@ -503,7 +503,7 @@ export const useGridVirtualScroller = () => {
       if (panel) {
         rows.push(panel);
       }
-      if (isLastVisible) {
+      if (params.position === undefined && isLastVisibleInSection) {
         rows.push(apiRef.current.getInfiniteLoadingTriggerElement?.({ lastRowId: id }));
       }
     });

From c185884ad3964a8966a47e32caf2163c3fffc0e2 Mon Sep 17 00:00:00 2001
From: Armin Mehinovic <armin@mui.com>
Date: Fri, 13 Sep 2024 14:15:41 +0200
Subject: [PATCH 3/3] Adjust test to properly catch the initial callback with
 the old code

---
 .../tests/infiniteLoader.DataGridPro.test.tsx | 20 ++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/packages/x-data-grid-pro/src/tests/infiniteLoader.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/infiniteLoader.DataGridPro.test.tsx
index bb284005320e..b21bc104604b 100644
--- a/packages/x-data-grid-pro/src/tests/infiniteLoader.DataGridPro.test.tsx
+++ b/packages/x-data-grid-pro/src/tests/infiniteLoader.DataGridPro.test.tsx
@@ -173,11 +173,18 @@ describe('<DataGridPro /> - Infnite loader', () => {
       { id: 4, brand: 'Jordan' },
       { id: 5, brand: 'Reebok' },
     ];
-    const pinnedRows = {
+    const basePinnedRows = {
       bottom: [{ id: 6, brand: 'Unbranded' }],
     };
+
     const handleRowsScrollEnd = spy();
-    function TestCase({ rows }: { rows: typeof baseRows }) {
+    function TestCase({
+      rows,
+      pinnedRows,
+    }: {
+      rows: typeof baseRows;
+      pinnedRows: typeof basePinnedRows;
+    }) {
       return (
         <div style={{ width: 300, height: 300 }}>
           <DataGridPro
@@ -189,17 +196,16 @@ describe('<DataGridPro /> - Infnite loader', () => {
         </div>
       );
     }
-    const { container } = render(<TestCase rows={baseRows} />);
+    const { container } = render(<TestCase rows={baseRows} pinnedRows={basePinnedRows} />);
     const virtualScroller = container.querySelector('.MuiDataGrid-virtualScroller')!;
-    virtualScroller.dispatchEvent(new Event('scroll'));
+    await sleep(1);
     // after initial render and a scroll event that did not reach the bottom of the grid
     // the `onRowsScrollEnd` should not be called
     expect(handleRowsScrollEnd.callCount).to.equal(0);
     // arbitrary number to make sure that the bottom of the grid window is reached.
     virtualScroller.scrollTop = 12345;
     virtualScroller.dispatchEvent(new Event('scroll'));
-    await waitFor(() => {
-      expect(handleRowsScrollEnd.callCount).to.equal(1);
-    });
+    await sleep(1);
+    expect(handleRowsScrollEnd.callCount).to.equal(1);
   });
 });