From d552ec5d9f71732a76aea9c6d62d562942cdd4b5 Mon Sep 17 00:00:00 2001 From: Armin Mehinovic Date: Wed, 9 Oct 2024 09:03:41 +0200 Subject: [PATCH 01/14] Revert changes made in #14877 --- .../virtualization/GridVirtualScrollbar.tsx | 20 ++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/packages/x-data-grid/src/components/virtualization/GridVirtualScrollbar.tsx b/packages/x-data-grid/src/components/virtualization/GridVirtualScrollbar.tsx index 912ed05493532..bb641830fda8b 100644 --- a/packages/x-data-grid/src/components/virtualization/GridVirtualScrollbar.tsx +++ b/packages/x-data-grid/src/components/virtualization/GridVirtualScrollbar.tsx @@ -70,8 +70,8 @@ const GridVirtualScrollbar = React.forwardRef(null); const contentRef = React.useRef(null); const classes = useUtilityClasses(rootProps, props.position); @@ -96,28 +96,34 @@ const GridVirtualScrollbar = React.forwardRef { const scroller = apiRef.current.virtualScrollerRef.current!; const scrollbar = scrollbarRef.current!; - if (scrollbar[propertyScroll] === lastPositionScrollbar.current) { + if (isLocked.current) { + isLocked.current = false; return; } + isLocked.current = true; const value = scrollbar[propertyScroll] / scrollbarInnerSize; scroller[propertyScroll] = value * contentSize; - - lastPositionScroller.current = scroller[propertyScroll]; }); useOnMount(() => { From 4b3147482a42f20c445979b92b15b9a5f40f3ff6 Mon Sep 17 00:00:00 2001 From: Armin Mehinovic Date: Wed, 9 Oct 2024 09:18:14 +0200 Subject: [PATCH 02/14] Update scrollbar position through ref --- .../x-data-grid/src/hooks/core/useGridRefs.ts | 4 +++ .../hooks/features/scroll/useGridScroll.ts | 26 ++++++++++++++++--- .../virtualization/useGridVirtualScroller.tsx | 4 +-- .../x-data-grid/src/models/api/gridCoreApi.ts | 10 ++++++- 4 files changed, 38 insertions(+), 6 deletions(-) diff --git a/packages/x-data-grid/src/hooks/core/useGridRefs.ts b/packages/x-data-grid/src/hooks/core/useGridRefs.ts index f1049fbc93c75..815c7f56e3281 100644 --- a/packages/x-data-grid/src/hooks/core/useGridRefs.ts +++ b/packages/x-data-grid/src/hooks/core/useGridRefs.ts @@ -7,6 +7,8 @@ export const useGridRefs = ( const rootElementRef = React.useRef(null); const mainElementRef = React.useRef(null); const virtualScrollerRef = React.useRef(null); + const virtualScrollbarVerticalRef = React.useRef(null); + const virtualScrollbarHorizontalRef = React.useRef(null); const columnHeadersContainerRef = React.useRef(null); apiRef.current.register('public', { @@ -16,6 +18,8 @@ export const useGridRefs = ( apiRef.current.register('private', { mainElementRef, virtualScrollerRef, + virtualScrollbarVerticalRef, + virtualScrollbarHorizontalRef, columnHeadersContainerRef, }); }; diff --git a/packages/x-data-grid/src/hooks/features/scroll/useGridScroll.ts b/packages/x-data-grid/src/hooks/features/scroll/useGridScroll.ts index f8628fa5451c4..67126ae3366e1 100644 --- a/packages/x-data-grid/src/hooks/features/scroll/useGridScroll.ts +++ b/packages/x-data-grid/src/hooks/features/scroll/useGridScroll.ts @@ -59,6 +59,8 @@ export const useGridScroll = ( const logger = useGridLogger(apiRef, 'useGridScroll'); const colRef = apiRef.current.columnHeadersContainerRef; const virtualScrollerRef = apiRef.current.virtualScrollerRef!; + const virtualScrollbarHorizontalRef = apiRef.current.virtualScrollbarHorizontalRef!; + const virtualScrollbarVerticalRef = apiRef.current.virtualScrollbarVerticalRef!; const visibleSortedRows = useGridSelector(apiRef, gridExpandedSortedRowEntriesSelector); const scrollToIndexes = React.useCallback( @@ -144,19 +146,37 @@ export const useGridScroll = ( const scroll = React.useCallback( (params: Partial) => { - if (virtualScrollerRef.current && params.left !== undefined && colRef.current) { + if ( + virtualScrollerRef.current && + virtualScrollbarHorizontalRef.current && + params.left !== undefined && + colRef.current + ) { const direction = isRtl ? -1 : 1; colRef.current.scrollLeft = params.left; virtualScrollerRef.current.scrollLeft = direction * params.left; + virtualScrollbarHorizontalRef.current.scrollLeft = direction * params.left; logger.debug(`Scrolling left: ${params.left}`); } - if (virtualScrollerRef.current && params.top !== undefined) { + if ( + virtualScrollerRef.current && + virtualScrollbarVerticalRef.current && + params.top !== undefined + ) { virtualScrollerRef.current.scrollTop = params.top; + virtualScrollbarVerticalRef.current.scrollTop = params.top; logger.debug(`Scrolling top: ${params.top}`); } logger.debug(`Scrolling, updating container, and viewport`); }, - [virtualScrollerRef, isRtl, colRef, logger], + [ + virtualScrollerRef, + virtualScrollbarHorizontalRef, + virtualScrollbarVerticalRef, + isRtl, + colRef, + logger, + ], ); const getScrollPosition = React.useCallback(() => { 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 cf6cb4401c697..26505febe3dd2 100644 --- a/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx +++ b/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx @@ -119,8 +119,8 @@ export const useGridVirtualScroller = () => { const gridRootRef = apiRef.current.rootElementRef; const mainRef = apiRef.current.mainElementRef; const scrollerRef = apiRef.current.virtualScrollerRef; - const scrollbarVerticalRef = React.useRef(null); - const scrollbarHorizontalRef = React.useRef(null); + const scrollbarVerticalRef = apiRef.current.virtualScrollbarVerticalRef; + const scrollbarHorizontalRef = apiRef.current.virtualScrollbarHorizontalRef; const contentHeight = dimensions.contentSize.height; const columnsTotalWidth = dimensions.columnsTotalWidth; const hasColSpan = useGridSelector(apiRef, gridHasColSpanSelector); diff --git a/packages/x-data-grid/src/models/api/gridCoreApi.ts b/packages/x-data-grid/src/models/api/gridCoreApi.ts index 8a48f4ee24125..1dfaf2834b597 100644 --- a/packages/x-data-grid/src/models/api/gridCoreApi.ts +++ b/packages/x-data-grid/src/models/api/gridCoreApi.ts @@ -69,9 +69,17 @@ export interface GridCorePrivateApi< */ mainElementRef: React.RefObject; /** - * The React ref of the grid virtual scroller container element. + * The React ref of the grid's virtual scroller container element. */ virtualScrollerRef: React.RefObject; + /** + * The React ref of the grid's vertical virtual scrollbar container element. + */ + virtualScrollbarVerticalRef: React.RefObject; + /** + * The React ref of the grid's horizontal virtual scrollbar container element. + */ + virtualScrollbarHorizontalRef: React.RefObject; /** * The React ref of the grid column container virtualized div element. */ From ec40d0b1f94600a6bb0b3dc83efb6fb8f4c123b7 Mon Sep 17 00:00:00 2001 From: Armin Mehinovic Date: Wed, 9 Oct 2024 11:27:35 +0200 Subject: [PATCH 03/14] Adjust test --- .../src/tests/infiniteLoader.DataGridPro.test.tsx | 3 +++ 1 file changed, 3 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 131bc7fc66684..133ff0973d079 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 @@ -51,6 +51,9 @@ describe(' - Infnite loader', () => { { id: 6, brand: 'Gucci' }, { id: 7, brand: "Levi's" }, { id: 8, brand: 'Ray-Ban' }, + { id: 9, brand: 'Umbro' }, + { id: 10, brand: 'Timberland' }, + { id: 11, brand: 'Fila' }, ), }); // Trigger a scroll again to notify the grid that we're not in the bottom area anymore From 005e2cf9e46caa60b0d8507f991f2e4073a09ba7 Mon Sep 17 00:00:00 2001 From: Armin Mehinovic Date: Wed, 9 Oct 2024 11:46:58 +0200 Subject: [PATCH 04/14] Revert test update --- .../src/tests/infiniteLoader.DataGridPro.test.tsx | 3 --- 1 file changed, 3 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 133ff0973d079..131bc7fc66684 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 @@ -51,9 +51,6 @@ describe(' - Infnite loader', () => { { id: 6, brand: 'Gucci' }, { id: 7, brand: "Levi's" }, { id: 8, brand: 'Ray-Ban' }, - { id: 9, brand: 'Umbro' }, - { id: 10, brand: 'Timberland' }, - { id: 11, brand: 'Fila' }, ), }); // Trigger a scroll again to notify the grid that we're not in the bottom area anymore From a07586b324fab25523159d2e40944b9e515af1b6 Mon Sep 17 00:00:00 2001 From: Armin Mehinovic Date: Wed, 9 Oct 2024 14:26:44 +0200 Subject: [PATCH 05/14] Karma output with debug logs --- test/karma.conf.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/karma.conf.js b/test/karma.conf.js index 87070fd88d443..aa6b1f5ed2757 100644 --- a/test/karma.conf.js +++ b/test/karma.conf.js @@ -43,7 +43,7 @@ module.exports = function setKarmaConfig(config) { * - config.LOG_INFO * - config.LOG_DEBUG */ - logLevel: config.LOG_INFO, + logLevel: config.LOG_DEBUG, port: 9876, preprocessors: { 'test/karma.tests.js': ['webpack', 'sourcemap'], From ed8524bf7fc5ff5ee1c883e125eb3a6d564afa44 Mon Sep 17 00:00:00 2001 From: Armin Mehinovic Date: Wed, 9 Oct 2024 14:38:51 +0200 Subject: [PATCH 06/14] Revert config change --- test/karma.conf.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/karma.conf.js b/test/karma.conf.js index aa6b1f5ed2757..87070fd88d443 100644 --- a/test/karma.conf.js +++ b/test/karma.conf.js @@ -43,7 +43,7 @@ module.exports = function setKarmaConfig(config) { * - config.LOG_INFO * - config.LOG_DEBUG */ - logLevel: config.LOG_DEBUG, + logLevel: config.LOG_INFO, port: 9876, preprocessors: { 'test/karma.tests.js': ['webpack', 'sourcemap'], From a82a340f255f274503b8b082827606abf9b26266 Mon Sep 17 00:00:00 2001 From: Armin Mehinovic Date: Wed, 9 Oct 2024 14:39:36 +0200 Subject: [PATCH 07/14] Use different scrollTop numbers --- .../src/tests/infiniteLoader.DataGridPro.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 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 131bc7fc66684..53a7465bf09c7 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 @@ -41,7 +41,7 @@ describe(' - Infnite loader', () => { const { container, setProps } = render(); const virtualScroller = container.querySelector('.MuiDataGrid-virtualScroller')!; // arbitrary number to make sure that the bottom of the grid window is reached. - virtualScroller.scrollTop = 12345; + virtualScroller.scrollTop = 10000; virtualScroller.dispatchEvent(new Event('scroll')); await waitFor(() => { expect(handleRowsScrollEnd.callCount).to.equal(1); @@ -56,7 +56,7 @@ describe(' - Infnite loader', () => { // Trigger a scroll again to notify the grid that we're not in the bottom area anymore virtualScroller.dispatchEvent(new Event('scroll')); expect(handleRowsScrollEnd.callCount).to.equal(1); - virtualScroller.scrollTop = 12345; + virtualScroller.scrollTop = 15000; virtualScroller.dispatchEvent(new Event('scroll')); await waitFor(() => { expect(handleRowsScrollEnd.callCount).to.equal(2); From 5d6ff4eb5c51553df9f4dabee64c3576b762fe42 Mon Sep 17 00:00:00 2001 From: Armin Mehinovic Date: Wed, 9 Oct 2024 15:23:24 +0200 Subject: [PATCH 08/14] Revert test change --- .../src/tests/infiniteLoader.DataGridPro.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 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 53a7465bf09c7..131bc7fc66684 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 @@ -41,7 +41,7 @@ describe(' - Infnite loader', () => { const { container, setProps } = render(); const virtualScroller = container.querySelector('.MuiDataGrid-virtualScroller')!; // arbitrary number to make sure that the bottom of the grid window is reached. - virtualScroller.scrollTop = 10000; + virtualScroller.scrollTop = 12345; virtualScroller.dispatchEvent(new Event('scroll')); await waitFor(() => { expect(handleRowsScrollEnd.callCount).to.equal(1); @@ -56,7 +56,7 @@ describe(' - Infnite loader', () => { // Trigger a scroll again to notify the grid that we're not in the bottom area anymore virtualScroller.dispatchEvent(new Event('scroll')); expect(handleRowsScrollEnd.callCount).to.equal(1); - virtualScroller.scrollTop = 15000; + virtualScroller.scrollTop = 12345; virtualScroller.dispatchEvent(new Event('scroll')); await waitFor(() => { expect(handleRowsScrollEnd.callCount).to.equal(2); From f51a99f6df7b6ee0d2e6d368a10f803c035ac635 Mon Sep 17 00:00:00 2001 From: Armin Mehinovic Date: Wed, 9 Oct 2024 16:20:44 +0200 Subject: [PATCH 09/14] Do not update vertical scrollbar --- .../x-data-grid/src/hooks/features/scroll/useGridScroll.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/x-data-grid/src/hooks/features/scroll/useGridScroll.ts b/packages/x-data-grid/src/hooks/features/scroll/useGridScroll.ts index 67126ae3366e1..aa8241721b5c4 100644 --- a/packages/x-data-grid/src/hooks/features/scroll/useGridScroll.ts +++ b/packages/x-data-grid/src/hooks/features/scroll/useGridScroll.ts @@ -160,11 +160,11 @@ export const useGridScroll = ( } if ( virtualScrollerRef.current && - virtualScrollbarVerticalRef.current && + // virtualScrollbarVerticalRef.current && params.top !== undefined ) { virtualScrollerRef.current.scrollTop = params.top; - virtualScrollbarVerticalRef.current.scrollTop = params.top; + // virtualScrollbarVerticalRef.current.scrollTop = params.top; logger.debug(`Scrolling top: ${params.top}`); } logger.debug(`Scrolling, updating container, and viewport`); @@ -172,7 +172,7 @@ export const useGridScroll = ( [ virtualScrollerRef, virtualScrollbarHorizontalRef, - virtualScrollbarVerticalRef, + // virtualScrollbarVerticalRef, isRtl, colRef, logger, From 84af8207f6956e14132b7e3fef124920b1d4750a Mon Sep 17 00:00:00 2001 From: Armin Mehinovic Date: Wed, 9 Oct 2024 16:24:14 +0200 Subject: [PATCH 10/14] Fix lint --- packages/x-data-grid/src/hooks/features/scroll/useGridScroll.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/x-data-grid/src/hooks/features/scroll/useGridScroll.ts b/packages/x-data-grid/src/hooks/features/scroll/useGridScroll.ts index aa8241721b5c4..c54bab7712308 100644 --- a/packages/x-data-grid/src/hooks/features/scroll/useGridScroll.ts +++ b/packages/x-data-grid/src/hooks/features/scroll/useGridScroll.ts @@ -60,7 +60,7 @@ export const useGridScroll = ( const colRef = apiRef.current.columnHeadersContainerRef; const virtualScrollerRef = apiRef.current.virtualScrollerRef!; const virtualScrollbarHorizontalRef = apiRef.current.virtualScrollbarHorizontalRef!; - const virtualScrollbarVerticalRef = apiRef.current.virtualScrollbarVerticalRef!; + // const virtualScrollbarVerticalRef = apiRef.current.virtualScrollbarVerticalRef!; const visibleSortedRows = useGridSelector(apiRef, gridExpandedSortedRowEntriesSelector); const scrollToIndexes = React.useCallback( From 11ec9e5b092d2c1574728f217caf539c17abb9da Mon Sep 17 00:00:00 2001 From: Armin Mehinovic Date: Wed, 9 Oct 2024 16:38:44 +0200 Subject: [PATCH 11/14] Align with master --- .../src/hooks/features/scroll/useGridScroll.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/x-data-grid/src/hooks/features/scroll/useGridScroll.ts b/packages/x-data-grid/src/hooks/features/scroll/useGridScroll.ts index c54bab7712308..520ae2fa93a00 100644 --- a/packages/x-data-grid/src/hooks/features/scroll/useGridScroll.ts +++ b/packages/x-data-grid/src/hooks/features/scroll/useGridScroll.ts @@ -59,7 +59,7 @@ export const useGridScroll = ( const logger = useGridLogger(apiRef, 'useGridScroll'); const colRef = apiRef.current.columnHeadersContainerRef; const virtualScrollerRef = apiRef.current.virtualScrollerRef!; - const virtualScrollbarHorizontalRef = apiRef.current.virtualScrollbarHorizontalRef!; + // const virtualScrollbarHorizontalRef = apiRef.current.virtualScrollbarHorizontalRef!; // const virtualScrollbarVerticalRef = apiRef.current.virtualScrollbarVerticalRef!; const visibleSortedRows = useGridSelector(apiRef, gridExpandedSortedRowEntriesSelector); @@ -148,14 +148,14 @@ export const useGridScroll = ( (params: Partial) => { if ( virtualScrollerRef.current && - virtualScrollbarHorizontalRef.current && + // virtualScrollbarHorizontalRef.current && params.left !== undefined && colRef.current ) { const direction = isRtl ? -1 : 1; colRef.current.scrollLeft = params.left; virtualScrollerRef.current.scrollLeft = direction * params.left; - virtualScrollbarHorizontalRef.current.scrollLeft = direction * params.left; + // virtualScrollbarHorizontalRef.current.scrollLeft = direction * params.left; logger.debug(`Scrolling left: ${params.left}`); } if ( @@ -171,7 +171,7 @@ export const useGridScroll = ( }, [ virtualScrollerRef, - virtualScrollbarHorizontalRef, + // virtualScrollbarHorizontalRef, // virtualScrollbarVerticalRef, isRtl, colRef, From a1d2b2b094d911b851d58a92ed5538d28b07acee Mon Sep 17 00:00:00 2001 From: Armin Mehinovic Date: Wed, 9 Oct 2024 16:52:29 +0200 Subject: [PATCH 12/14] Revert code changes --- .../src/hooks/features/scroll/useGridScroll.ts | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/x-data-grid/src/hooks/features/scroll/useGridScroll.ts b/packages/x-data-grid/src/hooks/features/scroll/useGridScroll.ts index 520ae2fa93a00..67126ae3366e1 100644 --- a/packages/x-data-grid/src/hooks/features/scroll/useGridScroll.ts +++ b/packages/x-data-grid/src/hooks/features/scroll/useGridScroll.ts @@ -59,8 +59,8 @@ export const useGridScroll = ( const logger = useGridLogger(apiRef, 'useGridScroll'); const colRef = apiRef.current.columnHeadersContainerRef; const virtualScrollerRef = apiRef.current.virtualScrollerRef!; - // const virtualScrollbarHorizontalRef = apiRef.current.virtualScrollbarHorizontalRef!; - // const virtualScrollbarVerticalRef = apiRef.current.virtualScrollbarVerticalRef!; + const virtualScrollbarHorizontalRef = apiRef.current.virtualScrollbarHorizontalRef!; + const virtualScrollbarVerticalRef = apiRef.current.virtualScrollbarVerticalRef!; const visibleSortedRows = useGridSelector(apiRef, gridExpandedSortedRowEntriesSelector); const scrollToIndexes = React.useCallback( @@ -148,31 +148,31 @@ export const useGridScroll = ( (params: Partial) => { if ( virtualScrollerRef.current && - // virtualScrollbarHorizontalRef.current && + virtualScrollbarHorizontalRef.current && params.left !== undefined && colRef.current ) { const direction = isRtl ? -1 : 1; colRef.current.scrollLeft = params.left; virtualScrollerRef.current.scrollLeft = direction * params.left; - // virtualScrollbarHorizontalRef.current.scrollLeft = direction * params.left; + virtualScrollbarHorizontalRef.current.scrollLeft = direction * params.left; logger.debug(`Scrolling left: ${params.left}`); } if ( virtualScrollerRef.current && - // virtualScrollbarVerticalRef.current && + virtualScrollbarVerticalRef.current && params.top !== undefined ) { virtualScrollerRef.current.scrollTop = params.top; - // virtualScrollbarVerticalRef.current.scrollTop = params.top; + virtualScrollbarVerticalRef.current.scrollTop = params.top; logger.debug(`Scrolling top: ${params.top}`); } logger.debug(`Scrolling, updating container, and viewport`); }, [ virtualScrollerRef, - // virtualScrollbarHorizontalRef, - // virtualScrollbarVerticalRef, + virtualScrollbarHorizontalRef, + virtualScrollbarVerticalRef, isRtl, colRef, logger, From d112bfd5abf957117aebc8ca25ba6790d4e4e515 Mon Sep 17 00:00:00 2001 From: Armin Mehinovic Date: Wed, 9 Oct 2024 16:52:42 +0200 Subject: [PATCH 13/14] Wrap events in --- .../tests/infiniteLoader.DataGridPro.test.tsx | 41 ++++++++++++------- 1 file changed, 27 insertions(+), 14 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 131bc7fc66684..a4a6fd8347d84 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 @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createRenderer, waitFor } from '@mui/internal-test-utils'; +import { act, createRenderer, waitFor } from '@mui/internal-test-utils'; import { expect } from 'chai'; import { DataGridPro } from '@mui/x-data-grid-pro'; import { spy, restore } from 'sinon'; @@ -40,24 +40,37 @@ describe(' - Infnite loader', () => { } const { container, setProps } = render(); const virtualScroller = container.querySelector('.MuiDataGrid-virtualScroller')!; - // arbitrary number to make sure that the bottom of the grid window is reached. - virtualScroller.scrollTop = 12345; - virtualScroller.dispatchEvent(new Event('scroll')); + + await act(async () => { + // 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); }); - setProps({ - rows: baseRows.concat( - { id: 6, brand: 'Gucci' }, - { id: 7, brand: "Levi's" }, - { id: 8, brand: 'Ray-Ban' }, - ), + + await act(async () => { + setProps({ + rows: baseRows.concat( + { id: 6, brand: 'Gucci' }, + { id: 7, brand: "Levi's" }, + { id: 8, brand: 'Ray-Ban' }, + ), + }); + + // Trigger a scroll again to notify the grid that we're not in the bottom area anymore + virtualScroller.dispatchEvent(new Event('scroll')); }); - // Trigger a scroll again to notify the grid that we're not in the bottom area anymore - virtualScroller.dispatchEvent(new Event('scroll')); + expect(handleRowsScrollEnd.callCount).to.equal(1); - virtualScroller.scrollTop = 12345; - virtualScroller.dispatchEvent(new Event('scroll')); + + await act(async () => { + virtualScroller.scrollTop = 12345; + virtualScroller.dispatchEvent(new Event('scroll')); + }); + await waitFor(() => { expect(handleRowsScrollEnd.callCount).to.equal(2); }); From 4724c6f5335235054f0cb1136260492af0db5e2a Mon Sep 17 00:00:00 2001 From: Armin Mehinovic Date: Wed, 9 Oct 2024 17:10:48 +0200 Subject: [PATCH 14/14] Missing revert --- .../src/components/virtualization/GridVirtualScrollbar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/x-data-grid/src/components/virtualization/GridVirtualScrollbar.tsx b/packages/x-data-grid/src/components/virtualization/GridVirtualScrollbar.tsx index bb641830fda8b..e5bf5410f4ccf 100644 --- a/packages/x-data-grid/src/components/virtualization/GridVirtualScrollbar.tsx +++ b/packages/x-data-grid/src/components/virtualization/GridVirtualScrollbar.tsx @@ -109,7 +109,7 @@ const GridVirtualScrollbar = React.forwardRef {