fix(select): doesn't scroll to selected item when menu is opened (#348)

tusen-ai · Jul 1, 2021 · 30d0299 · 30d0299
1 parent 8564f95
commit 30d0299
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 22 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -22,6 +22,7 @@
 - Fix `n-log` warn on highlight.js when no language is set, closes [#327](https://github.com/TuSimple/naive-ui/issues/327).
 - Remove `n-calendar`'s useless `console.log`.
 - Fix loading-bar disappears unexpectl, closes [#343](https://github.com/TuSimple/naive-ui/issues/343).
+- Fix `n-select` doesn't scroll to selected item when menu is opened, closes [#346](https://github.com/TuSimple/naive-ui/issues/346).
 
 ## 2.15.1 (2021-06-30)
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -22,6 +22,7 @@
 - 修复 `n-log` 在未设定语言时仍然对缺少 highlight.js 报错，关闭 [#327](https://github.com/TuSimple/naive-ui/issues/327)
 - 移除 `n-calendar` 无用的 console.log
 - 修复 loading-bar 自动消失，关闭 [#343](https://github.com/TuSimple/naive-ui/issues/343)
+- 修复 `n-select` 打开菜单时没有自动滚动到选中项，关闭 [#346](https://github.com/TuSimple/naive-ui/issues/346)
 
 ## 2.15.1 (2021-06-30)
 

diff --git a/package.json b/package.json
@@ -131,7 +131,7 @@
     "vdirs": "^0.1.4",
     "vfonts": "^0.1.0",
     "vooks": "^0.2.6",
-    "vueuc": "^0.4.7"
+    "vueuc": "^0.4.9"
   },
   "sideEffects": false,
   "homepage": "https://www.naiveui.com",

diff --git a/src/_internal/select-menu/src/SelectMenu.tsx b/src/_internal/select-menu/src/SelectMenu.tsx
@@ -8,7 +8,9 @@ import {
   watch,
   toRef,
   renderSlot,
-  provide
+  provide,
+  nextTick,
+  watchEffect
 } from 'vue'
 import { TreeNode, createIndexGetter } from 'treemate'
 import { VirtualList, VirtualListInst } from 'vueuc'
@@ -131,13 +133,15 @@ export default defineComponent({
           : null
       )
     }
-    watch(toRef(props, 'show'), (value) => {
-      if (value) initPendingNode()
-    })
     initPendingNode()
-    const defaultScrollIndex = pendingNodeRef.value
-      ? fIndexGetterRef.value(pendingNodeRef.value.key) ?? undefined
-      : undefined
+    onMounted(() => {
+      watchEffect(() => {
+        if (props.show) {
+          initPendingNode()
+          void nextTick(scrollToPendingNode)
+        }
+      })
+    })
     const itemSizeRef = computed(() => {
       return depx(themeRef.value.self[createKey('optionHeight', props.size)])
     })
@@ -231,17 +235,20 @@ export default defineComponent({
       doScroll = false
     ): void {
       pendingNodeRef.value = tmNode
-      if (doScroll && tmNode) {
-        const fIndex = fIndexGetterRef.value(tmNode.key)
-        if (fIndex === null) return
-        if (props.virtualScroll) {
-          virtualListRef.value?.scrollTo({ index: fIndex })
-        } else {
-          scrollbarRef.value?.scrollTo({
-            index: fIndex,
-            elSize: itemSizeRef.value
-          })
-        }
+      if (doScroll) scrollToPendingNode()
+    }
+    function scrollToPendingNode (): void {
+      const tmNode = pendingNodeRef.value
+      if (!tmNode) return
+      const fIndex = fIndexGetterRef.value(tmNode.key)
+      if (fIndex === null) return
+      if (props.virtualScroll) {
+        virtualListRef.value?.scrollTo({ index: fIndex })
+      } else {
+        scrollbarRef.value?.scrollTo({
+          index: fIndex,
+          elSize: itemSizeRef.value
+        })
       }
     }
     function handleFocusin (e: FocusEvent): void {
@@ -327,7 +334,6 @@ export default defineComponent({
       virtualListRef,
       scrollbarRef,
       style: styleRef,
-      defaultScrollIndex,
       itemSize: itemSizeRef,
       padding: paddingRef,
       flattenedNodes: flattenedNodesRef,
@@ -391,7 +397,6 @@ export default defineComponent({
                     items={this.flattenedNodes}
                     itemSize={this.itemSize}
                     showScrollbar={false}
-                    defaultScrollIndex={this.defaultScrollIndex}
                     paddingTop={this.padding.top}
                     paddingBottom={this.padding.bottom}
                     onResize={this.handleVirtualListResize}

diff --git a/src/select/demos/zhCN/menu-debug.demo.md b/src/select/demos/zhCN/menu-debug.demo.md
@@ -14,7 +14,7 @@ export default {
   data () {
     return {
       value: 'song0',
-      value1: ['song0', 'song1'],
+      value1: ['song0', 'song1', 'song11'],
       options: [
         {
           label: "Everybody's Got Something to Hide Except Me and My Monkey",