From 54425c91c3eab737e38e887173fdfceb904e9c49 Mon Sep 17 00:00:00 2001
From: moecasts <moecasts.caster@gmail.com>
Date: Tue, 15 Oct 2024 15:45:10 +0800
Subject: [PATCH] fix(select): initially scroll to the active item in
 OptionGroup

fix #3135
---
 src/_util/helper.ts        | 17 +++++++++++++++++
 src/select/base/Select.tsx | 11 ++++++++---
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/_util/helper.ts b/src/_util/helper.ts
index 24f7827fab..c86070d6d6 100644
--- a/src/_util/helper.ts
+++ b/src/_util/helper.ts
@@ -71,3 +71,20 @@ export function getPropsApiByEvent(eventName: string) {
 export function pxCompat(param: string | number) {
   return typeof param === 'number' ? `${param}px` : param;
 }
+
+/**
+ * 获取元素相对于容器(祖先)的偏移量
+ * @param element 目标元素
+ * @param container 容器元素
+ * @returns 相对于容器的偏移量
+ */
+export function getOffsetTopToContainer(element: HTMLElement, container: HTMLElement) {
+  let { offsetTop } = element;
+
+  let current = element.offsetParent as HTMLElement;
+  while (current && current !== container) {
+    offsetTop += current.offsetTop;
+    current = current.offsetParent as HTMLElement;
+  }
+  return offsetTop;
+}
diff --git a/src/select/base/Select.tsx b/src/select/base/Select.tsx
index 2ef3ebb18a..563a6d2459 100644
--- a/src/select/base/Select.tsx
+++ b/src/select/base/Select.tsx
@@ -14,6 +14,7 @@ import classNames from 'classnames';
 import isFunction from 'lodash/isFunction';
 import get from 'lodash/get';
 import debounce from 'lodash/debounce';
+import { getOffsetTopToContainer } from '../../_util/helper';
 import useControlled from '../../hooks/useControlled';
 import { useLocaleReceiver } from '../../locale/LocalReceiver';
 import useConfig from '../../hooks/useConfig';
@@ -385,12 +386,16 @@ const Select = forwardRefWithStatics(
         const elementBottomHeight = parseInt(paddingBottom, 10) + parseInt(marginBottom, 10);
         // 小于0时不需要特殊处理，会被设为0
         const updateValue =
-          firstSelectedNode.offsetTop -
+          getOffsetTopToContainer(firstSelectedNode, content) -
           content.offsetTop -
           (content.clientHeight - firstSelectedNode.clientHeight) +
           elementBottomHeight;
-        // eslint-disable-next-line no-param-reassign
-        content.scrollTop = updateValue;
+
+        // 通过 setTimeout 确保组件渲染完成后再设置 scrollTop
+        setTimeout(() => {
+          // eslint-disable-next-line no-param-reassign
+          content.scrollTop = updateValue;
+        });
       }
     };