diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 39c3e30c909..20117a3c8d1 100644 --- 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 index 49a52e595e5..67c44799dd9 100644 --- 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 index a669cb92839..8f8c3b3d46a 100644 --- 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 index 5efc2400ea7..59ab4f57a4a 100644 --- 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 index 2b86e3b0dd7..b0f339b2c2a 100644 --- 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",