From 0670ebf8c1156e326cbd1b4e98e2f2f1a5312d83 Mon Sep 17 00:00:00 2001
From: inottn <inottn@outlook.com>
Date: Wed, 17 May 2023 22:30:06 +0800
Subject: [PATCH] feat(Cascader): scroll the selected option into view when
 switching tabs (#11869)

---
 packages/vant/src/cascader/Cascader.tsx | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/packages/vant/src/cascader/Cascader.tsx b/packages/vant/src/cascader/Cascader.tsx
index 7c1a273ea..077700568 100644
--- a/packages/vant/src/cascader/Cascader.tsx
+++ b/packages/vant/src/cascader/Cascader.tsx
@@ -17,6 +17,9 @@ import {
   type Numeric,
 } from '../utils';
 
+// Composables
+import { useRefs } from '../composables/use-refs';
+
 // Components
 import { Tab } from '../tab';
 import { Tabs } from '../tabs';
@@ -53,6 +56,8 @@ export default defineComponent({
   setup(props, { slots, emit }) {
     const tabs = ref<CascaderTab[]>([]);
     const activeTab = ref(0);
+    const [selectedElementRefs, setSelectedElementRefs] =
+      useRefs<HTMLElement>();
 
     const {
       text: textKey,
@@ -222,6 +227,7 @@ export default defineComponent({
 
       return (
         <li
+          ref={selected ? setSelectedElementRefs(tabIndex) : undefined}
           role="menuitemradio"
           class={[bem('option', { selected, disabled }), option.className]}
           style={{ color }}
@@ -283,7 +289,20 @@ export default defineComponent({
       </Tabs>
     );
 
+    const scrollIntoView = (el: HTMLElement) => {
+      const scrollParent = el.parentElement;
+
+      if (scrollParent) {
+        scrollParent.scrollTop =
+          el.offsetTop - (scrollParent.offsetHeight - el.offsetHeight) / 2;
+      }
+    };
+
     updateTabs();
+    watch(activeTab, (value) => {
+      const el = selectedElementRefs.value[value];
+      if (el) scrollIntoView(el);
+    });
     watch(() => props.options, updateTabs, { deep: true });
     watch(
       () => props.modelValue,