From 51d8ffd0f321e9c7913a4176241f4f830fa57cd2 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 18 Sep 2023 18:48:08 +0000
Subject: [PATCH] fix: GroupedList.scrollToIndex() now targets group index

scrollToIndex accepts an item index value which, for a flat List
is the row index in the List. Because GroupedList is a List of Lists
the item index does not necessarily correspond with the row index in
the List. In fact, the first level of the List only has items for the
number of groups in the List so in most cases the scroll to index will
be out of bounds so far as the List is concerned and therefore will not
be found.

This change remaps "item index" to "group index" in GroupedLists
scrollToIndex() method which should ensure the group that owns an
particular row is scrolled in to view.

Note: this issue does not affect GroupedListV2 as it is implemented
as a flat List under the hood.
---
 ...-144ea3d7-6cc3-4aed-8fb4-aae163604755.json |  7 ++++++
 .../GroupedList/GroupedList.base.tsx          | 22 ++++++++++++++++++-
 2 files changed, 28 insertions(+), 1 deletion(-)
 create mode 100644 change/@fluentui-react-144ea3d7-6cc3-4aed-8fb4-aae163604755.json

diff --git a/change/@fluentui-react-144ea3d7-6cc3-4aed-8fb4-aae163604755.json b/change/@fluentui-react-144ea3d7-6cc3-4aed-8fb4-aae163604755.json
new file mode 100644
index 00000000000000..ac4b5eddb341cb
--- /dev/null
+++ b/change/@fluentui-react-144ea3d7-6cc3-4aed-8fb4-aae163604755.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: GroupedList.scrollToIndex() now targets group index",
+  "packageName": "@fluentui/react",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react/src/components/GroupedList/GroupedList.base.tsx b/packages/react/src/components/GroupedList/GroupedList.base.tsx
index 1881357e02d592..c085b006ae7e51 100644
--- a/packages/react/src/components/GroupedList/GroupedList.base.tsx
+++ b/packages/react/src/components/GroupedList/GroupedList.base.tsx
@@ -105,8 +105,10 @@ export class GroupedListBase extends React.Component<IGroupedListProps, IGrouped
   }
 
   public scrollToIndex(index: number, measureItem?: (itemIndex: number) => number, scrollToMode?: ScrollToMode): void {
+    const groupIndex = this._getGroupIndexFromItemIndex(index);
+    const scrollIndex = groupIndex > -1 ? groupIndex : index;
     if (this._list.current) {
-      this._list.current.scrollToIndex(index, measureItem, scrollToMode);
+      this._list.current.scrollToIndex(scrollIndex, measureItem, scrollToMode);
     }
   }
 
@@ -404,4 +406,22 @@ export class GroupedListBase extends React.Component<IGroupedListProps, IGrouped
       this._isSomeGroupExpanded = newIsSomeGroupExpanded;
     }
   }
+
+  private _getGroupIndexFromItemIndex(itemIndex: number): number {
+    const { groups } = this.state;
+
+    if (!groups) {
+      return -1;
+    }
+
+    for (let groupIndex = 0; groupIndex < groups.length; groupIndex++) {
+      const group = groups[groupIndex];
+
+      if (itemIndex >= group.startIndex && itemIndex < group.startIndex + group.count) {
+        return groupIndex;
+      }
+    }
+
+    return -1;
+  }
 }