feat(cascader): support scroll to first selected node (#3335)

* feat(cascader): support scroll to first select node * chore: fix lint
Tencent · Sep 24, 2024 · 47fd8c8 · 47fd8c8
1 parent d363914
commit 47fd8c8
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 4 deletions.
diff --git a/src/cascader/cascader.tsx b/src/cascader/cascader.tsx
@@ -10,9 +10,7 @@ import FakeArrow from '../common-components/fake-arrow';
 import props from './props';
 
 import { useCascaderContext } from './hooks';
-import {
-  CascaderValue, TdSelectInputProps, TdCascaderProps,
-} from './interface';
+import { CascaderValue, TdSelectInputProps, TdCascaderProps } from './interface';
 import { useConfig, usePrefixClass, useCommonClassName } from '../hooks/useConfig';
 import { PopupVisibleChangeContext } from '../popup';
 import { closeIconClickEffect, handleRemoveTagEffect } from './core/effect';
@@ -69,6 +67,25 @@ export default defineComponent({
       };
     });
 
+    const updateScrollTop = (content: HTMLDivElement) => {
+      const cascaderMenuList = content.querySelectorAll(`.${COMPONENT_NAME.value}__menu`);
+      cascaderMenuList.forEach((menu: HTMLDivElement) => {
+        const firstSelectedNode: HTMLDivElement = menu?.querySelector(`.${classPrefix.value}-is-selected`);
+        if (!firstSelectedNode || !menu) return;
+
+        const { paddingBottom } = getComputedStyle(firstSelectedNode);
+        const { marginBottom } = getComputedStyle(menu);
+        const elementBottomHeight = parseInt(paddingBottom, 10) + parseInt(marginBottom, 10);
+
+        const updateValue = firstSelectedNode.offsetTop
+          - menu.offsetTop
+          - (menu.clientHeight - firstSelectedNode.clientHeight)
+          + elementBottomHeight;
+        // eslint-disable-next-line no-param-reassign
+        menu.scrollTop = updateValue;
+      });
+    };
+
     return {
       COMPONENT_NAME,
       overlayClassName,
@@ -83,6 +100,7 @@ export default defineComponent({
       cascaderContext,
       emit,
       valueDisplayParams,
+      updateScrollTop,
     };
   },
   render() {
@@ -149,6 +167,7 @@ export default defineComponent({
             loading: this.loading,
             status: this.status,
             tips: this.tips,
+            updateScrollTop: this.updateScrollTop,
             suffixIcon: () => renderSuffixIcon(),
             popupProps: {
               ...(this.popupProps as TdCascaderProps['popupProps']),

diff --git a/src/popup/popup.tsx b/src/popup/popup.tsx
@@ -211,7 +211,7 @@ export default mixins(classPrefixMixins).extend({
 
     // popup弹出第一次初始化暴露事件
     popupMounted() {
-      // 用于select定位事件
+      // 用于下拉组件定位事件
       const overlayEl = this.$refs?.overlay as HTMLElement;
       if (overlayEl) {
         this.updateScrollTop?.(overlayEl);