ant-design-vue
ant-design-vue copied to clipboard
fix(Select): dropdown rendering blank
trafficstars
resolve #7539
背景:
使用dropdownRender对ASelect进行自定义扩展,在ASelect有焦点的情况下且滚动条滚动超过一页时,点击下拉会出现选项空白,完整讨论见 Issue,官方文档可复现。
操作步骤:
- 添加多个Item,直到数据超过一页
- 将滚动条滚动到最底部,点击页面除 Select 框以外的位置失焦
- 再次点击 Select 框,此时出现选项空白😱
对比流程:
ASelect不聚焦时,点击下拉框,会触发onContainerFocus等方法,在onContainerFocus方法中用setTimeout延迟修改mockFocused,mockFocused变化会引起List的onUpdated的执行,此时列表已渲染完成,offsetHeight能被正确赋值,触发了 watcher,更新state.scrollTop,进而更新到calRes.offset中。
而ASelect聚焦时,点击下拉框,不会触发onContainerFocus方法,导致offsetHeight未能正确赋值,进而calRes.offset未能正确计算,导致List未能正确滚动到历史停留位置,出现选项空白。
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