[data grid][dialog] The DataGrid's horizontal scroll resets to its default position automatically.

[ustimenko-andrew]

Steps to reproduce

I’m using a Dialog component together with a DataGrid. When the sort method is changed, the onSortModelChange function is triggered, followed by a re-render of the Dialog and the DataGrid. In about 50% of cases, a bug occurs: during horizontal scrolling, the table may automatically scroll back to the initial position.

Focus remains on a table cell, and it seems that autofocus is being triggered, which scrolls the view back to the column that controls sorting.

I tried using the following Dialog props:

disableAutoFocus disableEnforceFocus disableRestoreFocus

…but none of them helped. The only workaround that currently works for me is manually clearing the focus after changing the sort model using document.activeElement?.blur?.();

Current behavior

After changing the sorting method, horizontal scrolling in the DataGrid resets and focuses back on the sorted column automatically

Expected behavior

The horizontal scroll should not automatically return to the initial position or to the sorted column

Context

Is there any way to avoid focusing on the cell without using the workaround with document.activeElement?.blur?.()? At the moment, it’s unclear to me whether this issue comes from the Dialog, which might be trying to scroll to the first focusable element, or from the DataGrid itself.

Your environment

npx @mui/envinfo

 "@mui/material": "^6.1.6",
 "@mui/x-data-grid-pro": "^7.21.0",

Search keywords: DataGrid, Dialog, focus, scroll

Order ID: 110382

[kenanyusuf]

Hi @ustimenko-andrew thanks for raising the issue, are you able to provide us with a minimal reproduction so that we can help triage the issue you're seeing?

We have instructions on creating bug reproductions here: https://mui.com/x/introduction/support/#bug-reproductions

[ustimenko-andrew]

Hi, @KenanYusuf, I'm not sure I can easily prepare a minimal reproducible example, but in short: I'm using a simple setup — a MUI Dialog with a DataGrid inside. Here's a simplified version of the code:

<Dialog open={isShow} onClose={handleDecline} $width={1200}>
      <Table
        columns={columns}
        rows={hits}
        loading={isLoadingHits}
        initialState={{
          pinnedColumns: { right: ["state"] },
          sorting: { sortModel: [{ field: "createdAt", sort: "asc" }] },
        }}
        height="480px"
        pageSize={limit}
        onSortModelChange={onSortModelChange}
        hideFooter
        rowHeight={80}
      />
    </Dialog>

I'm using server-side sorting. When the sort rule changes, I trigger a new request and update the data:

  const onSortModelChange = (sortModel: GridSortModel) => {
    setSorting((prevVal) => ({
      ...prevVal,
      orderBy: sortModel.map(({ field, sort }) => ({
        field,
        order: sort === "asc" ? Api.Models.SortingOrder.ASC : Api.Models.SortingOrder.DESC,
      })),
    }));

    (document.activeElement as HTMLElement)?.blur?.();
  };

The problem: After updating the sort model, the table sometimes scrolls horizontally back to the column being sorted. It looks like focus remains on the cell in that column, and the auto-focus behavior triggers a scroll reset.

I recorded a short video to illustrate the issue. So far, the only workaround that reliably prevents this behavior is manually blurring the active element using: (document.activeElement as HTMLElement)?.blur?.(); Without that, the scroll may unexpectedly jump back. If you need more details, let me know. Thanks.

https://github.com/user-attachments/assets/aaee7286-288c-41ac-9c72-5b010a1feacc

[arminmeh]

@ustimenko-andrew

I have tried using your snippets to recreate the issue, but my grid is loading fine in the dialog. I had to remove some of the variables and props you are using, because your snippet does not show where they are coming from.

Also, you posted grid as Table component and I am not sure if you have a wrapping component around the DataGrid or you just misspelled it.

It would really help if you could give as a full reproduction code. It might be that this happens because of a reference change for some of the props, but as I mentioned, I couldn't reproduce it with the info that you have provided.

[github-actions[bot]]

This issue has been inactive for 7 days. Please remove the stale label or leave a comment to keep it open. Otherwise, it will be closed in 5 days.

[github-actions[bot]]

This issue has been closed due to 5 days of inactivity after being marked stale.