From d8e7236b6c0753deba57e896fbba3aee1de83d78 Mon Sep 17 00:00:00 2001
From: Andrew Cherniavskyi <andrew@mui.com>
Date: Mon, 1 May 2023 21:04:56 +0200
Subject: [PATCH 1/3] add failing unit test

---
 .../rowGrouping.DataGridPremium.test.tsx      | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/packages/grid/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx b/packages/grid/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx
index ee3463d14c6b..7cc9bd991233 100644
--- a/packages/grid/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx
+++ b/packages/grid/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx
@@ -2634,4 +2634,24 @@ describe('<DataGridPremium /> - Row Grouping', () => {
 
     await waitFor(() => expect(getCell(1, 3).textContent).to.equal('username 2'));
   });
+
+  // See https://github.com/mui/mui-x/issues/8580
+  it('should not collapse expanded groups after `updateRows`', async () => {
+    render(
+      <Test
+        columns={[{ field: 'id' }, { field: 'group' }, { field: 'username', width: 150 }]}
+        rows={[{ id: 1, group: 'A', username: 'username' }]}
+        rowGroupingModel={['group']}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: 'see children' }));
+
+    act(() => apiRef.current.updateRows([{ id: 1, group: 'A', username: 'username 2' }]));
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: 'hide children' })).toBeVisible();
+    });
+    await waitFor(() => expect(getCell(1, 3).textContent).to.equal('username 2'));
+  });
 });

From d27f910a4615244d3f780617fe61af856daab8ae Mon Sep 17 00:00:00 2001
From: Andrew Cherniavskyi <andrew@mui.com>
Date: Tue, 2 May 2023 11:09:27 +0200
Subject: [PATCH 2/3] fix failing unit test

---
 packages/grid/x-data-grid-pro/src/utils/tree/utils.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/grid/x-data-grid-pro/src/utils/tree/utils.ts b/packages/grid/x-data-grid-pro/src/utils/tree/utils.ts
index cf01d96e52e8..966caece9ac6 100644
--- a/packages/grid/x-data-grid-pro/src/utils/tree/utils.ts
+++ b/packages/grid/x-data-grid-pro/src/utils/tree/utils.ts
@@ -34,8 +34,8 @@ export const getNodePathInTree = ({
   let node = tree[id] as GridGroupNode | GridLeafNode;
 
   while (node.id !== GRID_ROOT_GROUP_ID) {
-    path.push({
-      field: (node as GridGroupNode).groupingField,
+    path.unshift({
+      field: node.type === 'leaf' ? null : node.groupingField,
       key: node.groupingKey,
     });
 

From 7838728339acce5995b653e682c1f81719b8b9ba Mon Sep 17 00:00:00 2001
From: Andrew Cherniavskyi <andrew@mui.com>
Date: Tue, 2 May 2023 18:19:35 +0200
Subject: [PATCH 3/3] use push + reverse instead of unshift

---
 packages/grid/x-data-grid-pro/src/utils/tree/utils.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/grid/x-data-grid-pro/src/utils/tree/utils.ts b/packages/grid/x-data-grid-pro/src/utils/tree/utils.ts
index 966caece9ac6..3ac79ae56b86 100644
--- a/packages/grid/x-data-grid-pro/src/utils/tree/utils.ts
+++ b/packages/grid/x-data-grid-pro/src/utils/tree/utils.ts
@@ -34,7 +34,7 @@ export const getNodePathInTree = ({
   let node = tree[id] as GridGroupNode | GridLeafNode;
 
   while (node.id !== GRID_ROOT_GROUP_ID) {
-    path.unshift({
+    path.push({
       field: node.type === 'leaf' ? null : node.groupingField,
       key: node.groupingKey,
     });
@@ -42,6 +42,8 @@ export const getNodePathInTree = ({
     node = tree[node.parent!] as GridGroupNode | GridLeafNode;
   }
 
+  path.reverse();
+
   return path;
 };