New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[DataGrid] Fix flickering on mount #7205
Conversation
These are the results for the performance tests:
|
fix failing tests
2e89604
to
403e99b
Compare
@@ -1121,7 +1121,7 @@ describe('<DataGridPro /> - Row Editing', () => { | |||
const cell = getCell(0, 2); | |||
userEvent.mousePress(cell); | |||
fireEvent.doubleClick(cell); | |||
await act(() => { | |||
await waitFor(() => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't understand why, but without this change the test was failing with:
The current testing environment is not configured to support act
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I went through the call stack and found that the column headers are trying to react to a scroll event. Placing a breakpoint where scrollPositionChange
is published I found that the custom edit component is calling .focus()
. You can revert this change and do the following to make the test pass:
diff --git a/packages/grid/x-data-grid-pro/src/tests/rowEditing.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/rowEditing.DataGridPro.test.tsx
index 34cf0badc..061277b03 100644
--- a/packages/grid/x-data-grid-pro/src/tests/rowEditing.DataGridPro.test.tsx
+++ b/packages/grid/x-data-grid-pro/src/tests/rowEditing.DataGridPro.test.tsx
@@ -27,7 +27,7 @@ describe('<DataGridPro /> - Row Editing', () => {
const ref = React.useRef<HTMLInputElement>(null);
React.useLayoutEffect(() => {
if (hasFocus) {
- ref.current!.focus();
+ ref.current!.focus({ preventScroll: true });
}
}, [hasFocus]);
return <input ref={ref} />;
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks, Matheus!
@@ -716,13 +716,13 @@ describe('<DataGrid /> - Keyboard', () => { | |||
<DataGrid rows={rows} columns={columns} /> | |||
</div>, | |||
); | |||
expect(renderCell.callCount).to.equal(2); | |||
expect(renderCell.callCount).to.equal(6); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
And the number of rerenders changed here again 🤷🏻♂️
#7155 (comment)
@@ -1121,7 +1121,7 @@ describe('<DataGridPro /> - Row Editing', () => { | |||
const cell = getCell(0, 2); | |||
userEvent.mousePress(cell); | |||
fireEvent.doubleClick(cell); | |||
await act(() => { | |||
await waitFor(() => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I went through the call stack and found that the column headers are trying to react to a scroll event. Placing a breakpoint where scrollPositionChange
is published I found that the custom edit component is calling .focus()
. You can revert this change and do the following to make the test pass:
diff --git a/packages/grid/x-data-grid-pro/src/tests/rowEditing.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/rowEditing.DataGridPro.test.tsx
index 34cf0badc..061277b03 100644
--- a/packages/grid/x-data-grid-pro/src/tests/rowEditing.DataGridPro.test.tsx
+++ b/packages/grid/x-data-grid-pro/src/tests/rowEditing.DataGridPro.test.tsx
@@ -27,7 +27,7 @@ describe('<DataGridPro /> - Row Editing', () => {
const ref = React.useRef<HTMLInputElement>(null);
React.useLayoutEffect(() => {
if (hasFocus) {
- ref.current!.focus();
+ ref.current!.focus({ preventScroll: true });
}
}, [hasFocus]);
return <input ref={ref} />;
Port of #7155 to the
next
branch