fix: shouldn't scroll to the top of page if clicked #248
Conversation
|
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/react-component/cascader/EvmCNTSyQAmTABJ7jhidDfRpAk8p |
Codecov Report
@@ Coverage Diff @@
## master #248 +/- ##
=======================================
Coverage 99.78% 99.79%
=======================================
Files 15 15
Lines 474 484 +10
Branches 118 122 +4
=======================================
+ Hits 473 483 +10
Misses 1 1
Continue to review full report at Codecov.
|
src/OptionList/index.tsx
Outdated
| useKeyboard(ref, mergedOptions, fieldNames, activeValueCells, onPathOpen, onKeyboardSelect); | ||
|
|
||
| // >>>>> Active Scroll | ||
| const containerTop = containerRef.current?.getBoundingClientRect().top || 0; |
There was a problem hiding this comment.
这个还不如直接下面的 effect 来个 raf 做 scroll...
src/OptionList/index.tsx
Outdated
| ele?.scrollIntoView?.({ block: 'nearest' }); | ||
| } | ||
| const scrollOptionIntoView = () => { | ||
| if (containerRef.current?.getBoundingClientRect().top > 0) { |
There was a problem hiding this comment.
There was a problem hiding this comment.
试了下这个似乎判断不了，这个方法没判断是否在视窗内。
src/OptionList/index.tsx
Outdated
| ele?.scrollIntoView?.({ block: 'nearest' }); | ||
| } | ||
| } else { | ||
| raf(scrollOptionIntoView); |
There was a problem hiding this comment.
另外测一下是不是一帧够了，按理说不需要循环等待。而且这个嵌套的 raf effect 的 cleanup 也没有处理到
close ant-design/ant-design#33986
Bug 触发的原因是第一次有 active 的选项时，dropdown还没有显示，这时候是被藏在页面左上角的，所以整个视窗定位之后会回到顶部。
这个 PR 的解决方法就是把 dropdown 的getBoundingClientRect().top加入 deps 数组监听，但是这样做会使每次打开 cascader 的时候都 scroll 到 active 项的位置。用 raf 在getBoundingClientRect().top大于 0 时再触发 scroll，不影响 depsPlan C: 只滚动父元素