From 70d8729a52cfa09db67a2eb625b5132bb596bf70 Mon Sep 17 00:00:00 2001 From: Shaharyar Shamshi Date: Mon, 19 Feb 2024 22:31:27 +0530 Subject: [PATCH 01/17] fix onColumnWidthChange called before autosize affects column width --- .../columnResize/useGridColumnResize.tsx | 24 +++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/packages/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx b/packages/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx index eb0f0835cf81..7b5b52eb7653 100644 --- a/packages/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx +++ b/packages/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx @@ -284,6 +284,7 @@ export const useGridColumnResize = ( const logger = useGridLogger(apiRef, 'useGridColumnResize'); const colDefRef = React.useRef(); + const previousTimeStampOfMouseClick = React.useRef(); const columnHeaderElementRef = React.useRef(); const headerFilterElementRef = React.useRef(); const groupHeaderElementsRef = React.useRef([]); @@ -378,6 +379,16 @@ export const useGridColumnResize = ( // eslint-disable-next-line @typescript-eslint/no-use-before-define stopListening(); + if (previousTimeStampOfMouseClick.current) { + const lastTimeStamp = previousTimeStampOfMouseClick.current as number; + if (nativeEvent.timeStamp - lastTimeStamp < 300) { + // If the time difference is within the threshold, it's a double-click + // Reset the last mousedown timestamp + previousTimeStampOfMouseClick.current = 0; + return; + } + } + if (colDefRef.current) { apiRef.current.setColumnWidth(colDefRef.current.field, colDefRef.current.width!); logger.debug( @@ -610,6 +621,8 @@ export const useGridColumnResize = ( const doc = ownerDocument(apiRef.current.rootElementRef!.current); doc.body.style.cursor = 'col-resize'; + previousTimeStampOfMouseClick.current = event.timeStamp; + doc.addEventListener('mousemove', handleResizeMouseMove); doc.addEventListener('mouseup', handleResizeMouseUp); @@ -702,6 +715,17 @@ export const useGridColumnResize = ( } apiRef.current.updateColumns(newColumns); + + if (colDefRef.current) { + const columnsState = gridColumnsStateSelector(apiRef.current.state); + const column: GridStateColDef = columnsState.lookup[colDefRef.current.field]; + const width: number = column.width as number; + apiRef.current.publishEvent('columnWidthChange', { + element: apiRef.current.getColumnHeaderElement(colDefRef.current.field), + colDef: colDefRef.current, + width, + }); + } } finally { apiRef.current.unstable_setColumnVirtualization(true); isAutosizingRef.current = false; From 6d09b48b86118679bbba760045f129e0b050f965 Mon Sep 17 00:00:00 2001 From: Shaharyar Shamshi Date: Mon, 19 Feb 2024 23:31:52 +0530 Subject: [PATCH 02/17] fix onColumnWidthChange called before autosize affects column width --- .../columnResize/useGridColumnResize.tsx | 20 +++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/packages/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx b/packages/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx index 7b5b52eb7653..2f2dac2e32ee 100644 --- a/packages/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx +++ b/packages/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx @@ -284,7 +284,7 @@ export const useGridColumnResize = ( const logger = useGridLogger(apiRef, 'useGridColumnResize'); const colDefRef = React.useRef(); - const previousTimeStampOfMouseClick = React.useRef(); + const previousMouseClickEvent = React.useRef>(); const columnHeaderElementRef = React.useRef(); const headerFilterElementRef = React.useRef(); const groupHeaderElementsRef = React.useRef([]); @@ -379,12 +379,16 @@ export const useGridColumnResize = ( // eslint-disable-next-line @typescript-eslint/no-use-before-define stopListening(); - if (previousTimeStampOfMouseClick.current) { - const lastTimeStamp = previousTimeStampOfMouseClick.current as number; - if (nativeEvent.timeStamp - lastTimeStamp < 300) { - // If the time difference is within the threshold, it's a double-click - // Reset the last mousedown timestamp - previousTimeStampOfMouseClick.current = 0; + if (previousMouseClickEvent.current) { + const prevTimeStamp = previousMouseClickEvent.current.timeStamp; + const prevClientX = previousMouseClickEvent.current.clientX; + const prevClientY = previousMouseClickEvent.current.clientY; + if ( + nativeEvent.timeStamp - prevTimeStamp < 300 && + nativeEvent.clientX === prevClientX && + prevClientY === nativeEvent.clientY + ) { + previousMouseClickEvent.current = undefined; return; } } @@ -621,7 +625,7 @@ export const useGridColumnResize = ( const doc = ownerDocument(apiRef.current.rootElementRef!.current); doc.body.style.cursor = 'col-resize'; - previousTimeStampOfMouseClick.current = event.timeStamp; + previousMouseClickEvent.current = event; doc.addEventListener('mousemove', handleResizeMouseMove); doc.addEventListener('mouseup', handleResizeMouseUp); From 77c6ee8dead99edf1fb4b3feb8f004c8f4872682 Mon Sep 17 00:00:00 2001 From: Shaharyar Shamshi Date: Tue, 20 Feb 2024 01:57:38 +0530 Subject: [PATCH 03/17] native event stored instead of synthtic event --- .../features/columnResize/useGridColumnResize.tsx | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/packages/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx b/packages/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx index 2f2dac2e32ee..fe478a27eec5 100644 --- a/packages/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx +++ b/packages/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx @@ -284,7 +284,7 @@ export const useGridColumnResize = ( const logger = useGridLogger(apiRef, 'useGridColumnResize'); const colDefRef = React.useRef(); - const previousMouseClickEvent = React.useRef>(); + const previousMouseClickEvent = React.useRef(); const columnHeaderElementRef = React.useRef(); const headerFilterElementRef = React.useRef(); const groupHeaderElementsRef = React.useRef([]); @@ -380,13 +380,15 @@ export const useGridColumnResize = ( stopListening(); if (previousMouseClickEvent.current) { - const prevTimeStamp = previousMouseClickEvent.current.timeStamp; - const prevClientX = previousMouseClickEvent.current.clientX; - const prevClientY = previousMouseClickEvent.current.clientY; + const prevEvent = previousMouseClickEvent.current; + const prevTimeStamp = prevEvent instanceof MouseEvent ? prevEvent.timeStamp : 0; + const prevClientX = prevEvent instanceof MouseEvent ? prevEvent.clientX : null; + const prevClientY = prevEvent instanceof MouseEvent ? prevEvent.clientY : null; + if ( nativeEvent.timeStamp - prevTimeStamp < 300 && nativeEvent.clientX === prevClientX && - prevClientY === nativeEvent.clientY + nativeEvent.clientY === prevClientY ) { previousMouseClickEvent.current = undefined; return; @@ -625,7 +627,7 @@ export const useGridColumnResize = ( const doc = ownerDocument(apiRef.current.rootElementRef!.current); doc.body.style.cursor = 'col-resize'; - previousMouseClickEvent.current = event; + previousMouseClickEvent.current = event.nativeEvent; doc.addEventListener('mousemove', handleResizeMouseMove); doc.addEventListener('mouseup', handleResizeMouseUp); From 5c35631a1ee56766bc3d96ff0fa1582dc5d0fd0d Mon Sep 17 00:00:00 2001 From: Shaharyar Shamshi Date: Tue, 20 Feb 2024 02:31:12 +0530 Subject: [PATCH 04/17] native event stored instead of synthtic event --- .../src/hooks/features/columnResize/useGridColumnResize.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx b/packages/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx index fe478a27eec5..f182fe415d1c 100644 --- a/packages/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx +++ b/packages/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx @@ -284,7 +284,7 @@ export const useGridColumnResize = ( const logger = useGridLogger(apiRef, 'useGridColumnResize'); const colDefRef = React.useRef(); - const previousMouseClickEvent = React.useRef(); + const previousMouseClickEvent = React.useRef(); const columnHeaderElementRef = React.useRef(); const headerFilterElementRef = React.useRef(); const groupHeaderElementsRef = React.useRef([]); From f4c769399d18475fa0c5431658203bc5344bea4e Mon Sep 17 00:00:00 2001 From: Shaharyar Shamshi Date: Tue, 20 Feb 2024 11:27:55 +0530 Subject: [PATCH 05/17] native event stored instead of synthtic event --- .../src/tests/columnsVisibility.DataGridPro.test.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/x-data-grid-pro/src/tests/columnsVisibility.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/columnsVisibility.DataGridPro.test.tsx index 58d5b8168d13..33fc2c859b2c 100644 --- a/packages/x-data-grid-pro/src/tests/columnsVisibility.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/columnsVisibility.DataGridPro.test.tsx @@ -137,9 +137,10 @@ describe(' - Columns visibility', () => { expect(getColumnHeadersTextContent()).to.deep.equal(['id']); const separator = document.querySelector(`.${gridClasses['columnSeparator--resizable']}`)!; - fireEvent.mouseDown(separator, { clientX: 100 }); - fireEvent.mouseMove(separator, { clientX: 110, buttons: 1 }); - fireEvent.mouseUp(separator); + const mouseDownEvent = new MouseEvent('mousedown', { clientX: 100 }); + fireEvent(separator, mouseDownEvent); + fireEvent(separator, new MouseEvent('mousemove', { clientX: 110, buttons: 1 })); + fireEvent(separator, new MouseEvent('mouseup')); expect(getColumnHeadersTextContent()).to.deep.equal(['id']); }); From 8b96f02bcd79934532c87d88a272b003b0964dca Mon Sep 17 00:00:00 2001 From: Shaharyar Shamshi Date: Tue, 20 Feb 2024 12:03:16 +0530 Subject: [PATCH 06/17] native event stored instead of synthtic event --- .../tests/columnsVisibility.DataGridPro.test.tsx | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/packages/x-data-grid-pro/src/tests/columnsVisibility.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/columnsVisibility.DataGridPro.test.tsx index 33fc2c859b2c..fd5b17f1be23 100644 --- a/packages/x-data-grid-pro/src/tests/columnsVisibility.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/columnsVisibility.DataGridPro.test.tsx @@ -137,10 +137,15 @@ describe(' - Columns visibility', () => { expect(getColumnHeadersTextContent()).to.deep.equal(['id']); const separator = document.querySelector(`.${gridClasses['columnSeparator--resizable']}`)!; - const mouseDownEvent = new MouseEvent('mousedown', { clientX: 100 }); - fireEvent(separator, mouseDownEvent); - fireEvent(separator, new MouseEvent('mousemove', { clientX: 110, buttons: 1 })); - fireEvent(separator, new MouseEvent('mouseup')); + act(() => { + separator.dispatchEvent(new MouseEvent('mousedown', { clientX: 100 })); + }); + act(() => { + separator.dispatchEvent(new MouseEvent('mousemove', { clientX: 110, buttons: 1 })); + }); + act(() => { + separator.dispatchEvent(new MouseEvent('mouseup')); + }); expect(getColumnHeadersTextContent()).to.deep.equal(['id']); }); From e38b370f58100ee2491287b456430ff48ac3ebc1 Mon Sep 17 00:00:00 2001 From: Shaharyar Shamshi Date: Tue, 20 Feb 2024 12:29:01 +0530 Subject: [PATCH 07/17] native event stored instead of synthtic event --- .../hooks/features/columnResize/useGridColumnResize.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx b/packages/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx index f182fe415d1c..401191c96515 100644 --- a/packages/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx +++ b/packages/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx @@ -284,7 +284,7 @@ export const useGridColumnResize = ( const logger = useGridLogger(apiRef, 'useGridColumnResize'); const colDefRef = React.useRef(); - const previousMouseClickEvent = React.useRef(); + const previousMouseClickEvent = React.useRef(); const columnHeaderElementRef = React.useRef(); const headerFilterElementRef = React.useRef(); const groupHeaderElementsRef = React.useRef([]); @@ -381,9 +381,9 @@ export const useGridColumnResize = ( if (previousMouseClickEvent.current) { const prevEvent = previousMouseClickEvent.current; - const prevTimeStamp = prevEvent instanceof MouseEvent ? prevEvent.timeStamp : 0; - const prevClientX = prevEvent instanceof MouseEvent ? prevEvent.clientX : null; - const prevClientY = prevEvent instanceof MouseEvent ? prevEvent.clientY : null; + const prevTimeStamp = prevEvent.timeStamp; + const prevClientX = prevEvent.clientX; + const prevClientY = prevEvent.clientY; if ( nativeEvent.timeStamp - prevTimeStamp < 300 && From 417c43d7c4c7a70adb9b2ad1de3e54b56f5678b8 Mon Sep 17 00:00:00 2001 From: Shaharyar Shamshi Date: Tue, 20 Feb 2024 12:44:52 +0530 Subject: [PATCH 08/17] native event stored instead of synthtic event --- .../src/tests/columnsVisibility.DataGridPro.test.tsx | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/packages/x-data-grid-pro/src/tests/columnsVisibility.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/columnsVisibility.DataGridPro.test.tsx index fd5b17f1be23..58d5b8168d13 100644 --- a/packages/x-data-grid-pro/src/tests/columnsVisibility.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/columnsVisibility.DataGridPro.test.tsx @@ -137,15 +137,9 @@ describe(' - Columns visibility', () => { expect(getColumnHeadersTextContent()).to.deep.equal(['id']); const separator = document.querySelector(`.${gridClasses['columnSeparator--resizable']}`)!; - act(() => { - separator.dispatchEvent(new MouseEvent('mousedown', { clientX: 100 })); - }); - act(() => { - separator.dispatchEvent(new MouseEvent('mousemove', { clientX: 110, buttons: 1 })); - }); - act(() => { - separator.dispatchEvent(new MouseEvent('mouseup')); - }); + fireEvent.mouseDown(separator, { clientX: 100 }); + fireEvent.mouseMove(separator, { clientX: 110, buttons: 1 }); + fireEvent.mouseUp(separator); expect(getColumnHeadersTextContent()).to.deep.equal(['id']); }); From cd8cc5b3dba9e3c3cd2c8419ae6c98c829016b42 Mon Sep 17 00:00:00 2001 From: Shaharyar Shamshi Date: Tue, 20 Feb 2024 15:35:24 +0530 Subject: [PATCH 09/17] width of the new column added --- .../src/hooks/features/columnResize/useGridColumnResize.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx b/packages/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx index 401191c96515..268c7bb05c4a 100644 --- a/packages/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx +++ b/packages/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx @@ -728,7 +728,7 @@ export const useGridColumnResize = ( const width: number = column.width as number; apiRef.current.publishEvent('columnWidthChange', { element: apiRef.current.getColumnHeaderElement(colDefRef.current.field), - colDef: colDefRef.current, + colDef: { ...colDefRef.current, width }, width, }); } From e3b0d639e3b14552edb10feb14d4f2ae9963b916 Mon Sep 17 00:00:00 2001 From: Shaharyar Shamshi Date: Thu, 22 Feb 2024 00:12:18 +0530 Subject: [PATCH 10/17] test case added --- .../src/tests/columns.DataGridPro.test.tsx | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/packages/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx index 6643b4e5abeb..77e83119af6a 100644 --- a/packages/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx @@ -150,6 +150,23 @@ describe(' - Columns', () => { expect(onColumnWidthChange.args[0][0].width).to.equal(120); }); + it('should call onColumnWidthChange with correct width after resizing and then clicking the seprator', async () => { + const onColumnWidthChange = spy(); + render(); + const separator = document.querySelector(`.${gridClasses['columnSeparator--resizable']}`)!; + fireEvent.mouseDown(separator, { clientX: 100 }); + fireEvent.mouseMove(separator, { clientX: 110, buttons: 1 }); + fireEvent.mouseMove(separator, { clientX: 120, buttons: 1 }); + expect(onColumnWidthChange.callCount).to.equal(0); + fireEvent.mouseUp(separator); + clock.tick(0); + expect(onColumnWidthChange.callCount).to.equal(1); + expect(onColumnWidthChange.args[0][0].width).to.equal(120); + fireEvent.doubleClick(separator); + await microtasks(); + expect(onColumnWidthChange.args[1][0].width).to.equal(116); + }); + it('should not affect other cell elements that are not part of the main DataGrid instance', () => { render( Date: Thu, 22 Feb 2024 12:40:57 +0530 Subject: [PATCH 11/17] test case added --- packages/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx index 77e83119af6a..6529ea366171 100644 --- a/packages/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx @@ -164,6 +164,7 @@ describe(' - Columns', () => { expect(onColumnWidthChange.args[0][0].width).to.equal(120); fireEvent.doubleClick(separator); await microtasks(); + expect(onColumnWidthChange.callCount).to.equal(2); expect(onColumnWidthChange.args[1][0].width).to.equal(116); }); From 69e1a42021da57446a5a89577fae4a95eb43a803 Mon Sep 17 00:00:00 2001 From: Shaharyar Shamshi Date: Fri, 23 Feb 2024 01:56:23 +0530 Subject: [PATCH 12/17] test case added --- .../hooks/features/columnResize/useGridColumnResize.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx b/packages/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx index 268c7bb05c4a..011fc166a0ef 100644 --- a/packages/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx +++ b/packages/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx @@ -379,17 +379,24 @@ export const useGridColumnResize = ( // eslint-disable-next-line @typescript-eslint/no-use-before-define stopListening(); + // This block of code checks if the current mouse event is a double-click by comparing it with the previous mouse click event. + // It prevents unintentional double-clicks from being interpreted as two separate clicks. if (previousMouseClickEvent.current) { + // Retrieve the details of the previous mouse click event. const prevEvent = previousMouseClickEvent.current; const prevTimeStamp = prevEvent.timeStamp; const prevClientX = prevEvent.clientX; const prevClientY = prevEvent.clientY; + // Check if the time elapsed between the current and previous mouse clicks is less than 300 milliseconds, + // and if the current mouse click occurred at the same position as the previous one. if ( nativeEvent.timeStamp - prevTimeStamp < 300 && nativeEvent.clientX === prevClientX && nativeEvent.clientY === prevClientY ) { + // If the conditions are met, it indicates that the current event is part of a double-click, + // so we clear the previous mouse click event and return early to ignore it. previousMouseClickEvent.current = undefined; return; } From ce715518325256c64ee6faf83f4547dd3b9d56e9 Mon Sep 17 00:00:00 2001 From: Shaharyar Shamshi Date: Mon, 26 Feb 2024 20:03:50 +0530 Subject: [PATCH 13/17] unnecessary comment removed --- .../hooks/features/columnResize/useGridColumnResize.tsx | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/packages/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx b/packages/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx index 011fc166a0ef..ceb93ac43588 100644 --- a/packages/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx +++ b/packages/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx @@ -379,24 +379,19 @@ export const useGridColumnResize = ( // eslint-disable-next-line @typescript-eslint/no-use-before-define stopListening(); - // This block of code checks if the current mouse event is a double-click by comparing it with the previous mouse click event. - // It prevents unintentional double-clicks from being interpreted as two separate clicks. + // Prevent double-clicks from being interpreted as two separate clicks if (previousMouseClickEvent.current) { - // Retrieve the details of the previous mouse click event. const prevEvent = previousMouseClickEvent.current; const prevTimeStamp = prevEvent.timeStamp; const prevClientX = prevEvent.clientX; const prevClientY = prevEvent.clientY; - // Check if the time elapsed between the current and previous mouse clicks is less than 300 milliseconds, - // and if the current mouse click occurred at the same position as the previous one. + // Check if the current event is part of a double-click if ( nativeEvent.timeStamp - prevTimeStamp < 300 && nativeEvent.clientX === prevClientX && nativeEvent.clientY === prevClientY ) { - // If the conditions are met, it indicates that the current event is part of a double-click, - // so we clear the previous mouse click event and return early to ignore it. previousMouseClickEvent.current = undefined; return; } From d56332d859ee8cefc1480b96187475b60ec6c2da Mon Sep 17 00:00:00 2001 From: Shaharyar Shamshi Date: Tue, 27 Feb 2024 19:25:35 +0530 Subject: [PATCH 14/17] typo fixed --- .../x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx index 6529ea366171..dabe190947e9 100644 --- a/packages/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx @@ -150,7 +150,7 @@ describe(' - Columns', () => { expect(onColumnWidthChange.args[0][0].width).to.equal(120); }); - it('should call onColumnWidthChange with correct width after resizing and then clicking the seprator', async () => { + it('should call onColumnWidthChange with correct width after resizing and then clicking the separator', async () => { const onColumnWidthChange = spy(); render(); const separator = document.querySelector(`.${gridClasses['columnSeparator--resizable']}`)!; @@ -166,6 +166,7 @@ describe(' - Columns', () => { await microtasks(); expect(onColumnWidthChange.callCount).to.equal(2); expect(onColumnWidthChange.args[1][0].width).to.equal(116); + expect(onColumnWidthChange.args[1][0].colDef.width).to.equal(116); }); it('should not affect other cell elements that are not part of the main DataGrid instance', () => { From 57a4903d3e78545264516bf5df66ef921e68edd4 Mon Sep 17 00:00:00 2001 From: Shaharyar Shamshi Date: Tue, 27 Feb 2024 21:40:24 +0530 Subject: [PATCH 15/17] resize event fired for multiple column --- .../features/columnResize/useGridColumnResize.tsx | 12 +++++------- .../src/tests/columns.DataGridPro.test.tsx | 10 +++++++--- 2 files changed, 12 insertions(+), 10 deletions(-) diff --git a/packages/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx b/packages/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx index ceb93ac43588..6bfbe541a900 100644 --- a/packages/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx +++ b/packages/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx @@ -724,16 +724,14 @@ export const useGridColumnResize = ( apiRef.current.updateColumns(newColumns); - if (colDefRef.current) { - const columnsState = gridColumnsStateSelector(apiRef.current.state); - const column: GridStateColDef = columnsState.lookup[colDefRef.current.field]; - const width: number = column.width as number; + newColumns.forEach((newColumn) => { + const width: number = newColumn.width as number; apiRef.current.publishEvent('columnWidthChange', { - element: apiRef.current.getColumnHeaderElement(colDefRef.current.field), - colDef: { ...colDefRef.current, width }, + element: apiRef.current.getColumnHeaderElement(newColumn.field), + colDef: newColumn, width, }); - } + }); } finally { apiRef.current.unstable_setColumnVirtualization(true); isAutosizingRef.current = false; diff --git a/packages/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx index dabe190947e9..a0e0ac669a7a 100644 --- a/packages/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx @@ -164,9 +164,13 @@ describe(' - Columns', () => { expect(onColumnWidthChange.args[0][0].width).to.equal(120); fireEvent.doubleClick(separator); await microtasks(); - expect(onColumnWidthChange.callCount).to.equal(2); - expect(onColumnWidthChange.args[1][0].width).to.equal(116); - expect(onColumnWidthChange.args[1][0].colDef.width).to.equal(116); + expect(onColumnWidthChange.callCount).to.be.at.least(2); + const widthArgs = onColumnWidthChange.args.map((arg) => arg[0].width); + const isWidth116Present = widthArgs.some((width) => width === 116); + expect(isWidth116Present).to.equal(true); + const colDefWidthArgs = onColumnWidthChange.args.map((arg) => arg[0].colDef.width); + const isColDefWidth116Present = colDefWidthArgs.some((width) => width === 116); + expect(isColDefWidth116Present).to.equal(true); }); it('should not affect other cell elements that are not part of the main DataGrid instance', () => { From ca1e9d5a1dc7aa651fa54c6eed9a23c46165ef08 Mon Sep 17 00:00:00 2001 From: Shaharyar Shamshi Date: Tue, 27 Feb 2024 23:14:01 +0530 Subject: [PATCH 16/17] column width trigger for only changed column --- .../columnResize/useGridColumnResize.tsx | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/packages/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx b/packages/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx index 6bfbe541a900..be7445287d9a 100644 --- a/packages/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx +++ b/packages/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx @@ -724,13 +724,15 @@ export const useGridColumnResize = ( apiRef.current.updateColumns(newColumns); - newColumns.forEach((newColumn) => { - const width: number = newColumn.width as number; - apiRef.current.publishEvent('columnWidthChange', { - element: apiRef.current.getColumnHeaderElement(newColumn.field), - colDef: newColumn, - width, - }); + newColumns.forEach((newColumn, index) => { + if (newColumn.width != columns[index].width) { + const width = newColumn.width; + apiRef.current.publishEvent('columnWidthChange', { + element: apiRef.current.getColumnHeaderElement(newColumn.field), + colDef: newColumn, + width, + }); + } }); } finally { apiRef.current.unstable_setColumnVirtualization(true); From e80c76a35f99b5793779bd9576cb909070d48f55 Mon Sep 17 00:00:00 2001 From: Shaharyar Shamshi Date: Tue, 27 Feb 2024 23:27:01 +0530 Subject: [PATCH 17/17] column width trigger for only changed column --- .../src/hooks/features/columnResize/useGridColumnResize.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx b/packages/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx index be7445287d9a..1c81445eff46 100644 --- a/packages/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx +++ b/packages/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx @@ -725,7 +725,7 @@ export const useGridColumnResize = ( apiRef.current.updateColumns(newColumns); newColumns.forEach((newColumn, index) => { - if (newColumn.width != columns[index].width) { + if (newColumn.width !== columns[index].width) { const width = newColumn.width; apiRef.current.publishEvent('columnWidthChange', { element: apiRef.current.getColumnHeaderElement(newColumn.field),