ant-design-vue icon indicating copy to clipboard operation
ant-design-vue copied to clipboard

When the Select component uses the [Down Arrow] to trigger lazy loading options, active automatically jumps back to the first option instead of remembering the last active

Open chenzequ opened this issue 2 years ago • 2 comments

  • [ ] I have searched the issues of this repository and believe that this is not a duplicate.

Version

3.3.0-beta.2

Environment

macos,chrome,vue3.x

Reproduction link

Edit on CodeSandbox

Steps to reproduce

<template>
<div style="margin:8px;background-color:white;padding:8px">
<Select style="width:140px" :options="options" show-search :filterOption="false"
@dropdown-visible-change="(v) => v ? attachOptions() : (options = [])"
@popup-scroll="(e) => attachOptions()" />
</div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Select } from 'ant-design-vue'

const options = ref<Array<any>>([])
let count = 0
const attachOptions = () => {
count  
for (let i = 0; i < 10; i  ) {
options.value.push({
key: count * 100   i,
label: `name_${count}_${i}`
})
}
}
</script>

What is expected?

按下向下键懒加载后,active索引依然可以继续向下跳到下一个索引。

What is actually happening?

有可能是因为,options 在附加数据后,无法保持 active的位置。

chenzequ avatar Jul 26 '22 05:07 chenzequ

提前加载出来,不要等最后一次

tangjinzhou avatar Jul 28 '22 11:07 tangjinzhou

提前加载出来,不要等最后一次

@tangjinzhou 我是懒加载数据,数据怎么提前加载呢? 我的需求是下拉滚动条滚动到最底部的时候,加载下一页数据。如果用鼠标操作是没有问题的,但是用键盘向下操作的时候,那个active的效果就自动跳回最顶部了。 CodeSandbox里面只是简单的滚动就加载下一页,根本没有怎么最后一次的说法。。

chenzequ avatar Aug 01 '22 15:08 chenzequ

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days

github-actions[bot] avatar Oct 01 '22 04:10 github-actions[bot]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

github-actions[bot] avatar Oct 10 '23 00:10 github-actions[bot]