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

fix(Select): dropdown rendering blank

Open hdmy opened this issue 1 year ago • 1 comments
trafficstars

resolve #7539

背景: 使用dropdownRenderASelect进行自定义扩展,在ASelect有焦点的情况下且滚动条滚动超过一页时,点击下拉会出现选项空白,完整讨论见 Issue官方文档可复现。

操作步骤:

  1. 添加多个Item,直到数据超过一页
  2. 将滚动条滚动到最底部,点击页面除 Select 框以外的位置失焦
  3. 再次点击 Select 框,此时出现选项空白😱 2024-08-19-171117_out

对比流程: ASelect不聚焦时,点击下拉框,会触发onContainerFocus等方法,在onContainerFocus方法中用setTimeout延迟修改mockFocusedmockFocused变化会引起ListonUpdated的执行,此时列表已渲染完成,offsetHeight能被正确赋值,触发了 watcher,更新state.scrollTop,进而更新到calRes.offset中。

ASelect聚焦时,点击下拉框,不会触发onContainerFocus方法,导致offsetHeight未能正确赋值,进而calRes.offset未能正确计算,导致List未能正确滚动到历史停留位置,出现选项空白。

hdmy avatar Jun 20 '24 08:06 hdmy

This PR 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 19 '24 02:10 github-actions[bot]