Skip to content

Issue with lazy loading when using Select component(使用Select 組件進行懶載入時遇到的問題) #6669

@Sam85722

Description

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

Version

4.0.0-rc.5

Environment

"vue": "^3.0.0"

Reproduction link

Edit on CodeSandbox

Steps to reproduce

Issue with lazy loading when using Select component:

  1. When scrolling to the last item, a loading trigger is activated to load more data. This functionality works correctly when scrolling with the mouse. However, when using the keyboard( pressing the [Arrow Down]) and reaching the last item to trigger the loading, the focus unexpectedly jumps back to the first item instead of staying on the last item.
    在使用 Select 組件時遇到的問題。當使用鍵盤滾動到最後一個項目以觸發加載更多資料時,焦點意外地跳回到第一個項目,而不是停留在最後一個項目上。這個問題在使用滑鼠滾動時並不會出現,只有在使用鍵盤時才會出現。

  2. When the focus is on the first item, pressing the [Arrow Up] key triggers the loading of more data by jumping to the last item, but then the focus jumps back to the first item.
    當焦點在第一個項目時,按[向上]鍵會因為跳至最後一個項目,以觸發加載資料,焦點又跳回第一個項目
    導致當焦點只要在第一個項目,持續按[向上]鍵就會不停加載資料

What is expected?

1.When scrolling to the last item and triggering the loading of more data using the keyboard, the focus should stay on the last item.
當滾動到最後一項並使用鍵盤觸發加載更多數據時,焦點應停留在最後一項上。
2.When the focus is on the first item and the [Arrow Up] key is pressed:
當焦點位於第一項並按下[向上]鍵時,我目前想到兩種: (希望有更好的解決辦法)

2-1.The focus stays on the first item without jumping to the last item or triggering the loading of more data.
當焦點位於第一項並按下[向上]鍵時,焦點保持在第一個項目上,不會跳轉到最後一個項目,也不會觸發加載更多數據。

2-2.When the focus is on the first item and the [Arrow Up] key is pressed, the focus jumps to the last item and triggers the loading of more data.
For example, if there are initially 10 items, pressing the [Arrow Up] key on the first item would move the focus to the last item(10) and load items 11 to 20.
當焦點位於第一項並按下“向上”鍵時,焦點跳轉到最後一個項目並觸發加載更多數據。
例如,如果一開始有10個項目,按下“向上”鍵時,焦點會移動到第10個並加載項目11到20。
如果再按[向下]鍵會到第11。

What is actually happening?

以上

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions