如果在拉动滚动条到底部后添加了更多选项,Material-UI的[Autocomplete]选项列表会滚动到顶部,

ztmd8pv5  于 5个月前  发布在  其他
关注(0)|答案(8)|浏览(79)

重复问题

  • 我已搜索现有的问题

最新版本

  • 我已测试了最新版本

重现步骤 🕹

链接到实时示例: https://codesandbox.io/p/sandbox/dark-dust-zdlhtj?file=%2Fsrc%2FDemo.tsx%3A29%2C18
步骤:

  1. 打开一个自动完成功能,在滚动时加载更多数据。
  2. 在数据加载完成之前,将滚动手柄拉到底部选项列表。
  3. 观察选项列表跳到顶部。

当前行为 😯

当手动滚动无限滚动选项列表的底部时,如果用户使用滚动手柄快速滚动,一旦数据加载完成,列表就会立即跳到顶部。

预期行为 🤔

滚动位置不应改变,就像使用其他方法滚动时观察到的那样。

背景知识 🔦

我们的QA团队在测试 #30249 已在我们的产品中解决时发现了这个边缘情况。当使用无限滚动自动完成功能时,这可能会导致用户体验降低。

你的环境 🌎

npx @mui/envinfo
在最新Chrome上观察到。

System:
    OS: macOS 13.6.1
  Binaries:
    Node: 18.14.1 - ~/.nvm/versions/node/v18.14.1/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.14.1/bin/yarn
    npm: 8.12.1 - ~/collibra/frontend/node_modules/.bin/npm
  Browsers:
    Chrome: 120.0.6099.109
    Edge: Not Found
    Safari: 17.0
  npmPackages:
    @emotion/react: 11.11.1 => 11.11.1 
    @emotion/styled: 11.11.0 => 11.11.0 
    @mui/base:  5.0.0-beta.21 
    @mui/core-downloads-tracker:  5.14.16 
    @mui/lab: ^5.0.0-alpha.140 => 5.0.0-alpha.150 
    @mui/material: 5.14.15 => 5.14.15 
    @mui/private-theming:  5.14.15 
    @mui/styled-engine:  5.14.15 
    @mui/system: 5.14.15 => 5.14.15 
    @mui/types:  7.2.7 
    @mui/utils: ^5.14.15 => 5.14.15 
    @mui/x-data-grid:  5.17.23 
    @mui/x-data-grid-pro: ^5.17.23 => 5.17.23 
    @mui/x-date-pickers:  5.0.20 
    @mui/x-date-pickers-pro: ^6.17.0 => 5.0.20 
    @mui/x-license-pro: 6.10.2 => 5.17.12 
    @mui/x-tree-view:  6.0.0-alpha.1 
    @types/react: 18.2.24 => 18.2.24 
    react: 18.2.0 => 18.2.0 
    react-dom: 18.2.0 => 18.2.0 
    typescript: 5.2.2 => 5.2.2
djp7away

djp7away1#

我在你的CodeSandbox复现中遇到了这个问题:
Autocomplete.scroll.to.top.mp4
当光标在滚动条上拖动到底部后,主要会发生这种情况。

hk8txs48

hk8txs482#

@ZeeshanTamboli 我遇到了相同的问题。重现链接 https://codesandbox.io/s/autocomplete-scroll-bug-39wfv

mrphzbgm

mrphzbgm3#

@mj12albert@ZeeshanTamboli 我遇到了相同的问题。重现链接 https://codesandbox.io/s/autocomplete-scroll-bug-39wfv 我有这个重现链接中具有相同行为的最后版本的MUI。

eulz3vhy

eulz3vhy4#

@ZeeshanTamboli 有关这个的更新有什么吗?我们什么时候能期待修复这个问题?

z0qdvdin

z0qdvdin5#

目前,由于我正在进行其他工作,所以没有关于该问题的更新。然而,这个问题已经开放给社区成员提供帮助和建议。您的协助或见解将受到极大的赞赏。

vdzxcuhz

vdzxcuhz6#

这段滚动重置是由#23718故意添加的。它只检查当前高亮显示的选项是否仍在列表中。当没有高亮显示的选项时,过滤后的选项长度发生变化时,滚动将始终被重置。

zdwk9cvp

zdwk9cvp7#

解决方法是将 autoHighlight 设置为 true,这样选项总是会被高亮显示。然后添加选项时滚动条不会被重置。

57hvy0tb

57hvy0tb8#

解决方法是将 autoHighlight 设置为 true,这样选项总是会被高亮显示。然后滚动条不会因为添加选项而被重置。
这个方法对我不起作用,可能是因为我在创建自定义纸张组件。有没有其他不同的解决方法?

相关问题