Conversation
Codecov Report
@@ Coverage Diff @@
## master #436 +/- ##
==========================================
+ Coverage 97.72% 97.73% +0.01%
==========================================
Files 13 13
Lines 790 794 +4
Branches 231 224 -7
==========================================
+ Hits 772 776 +4
Misses 18 18
📣 Codecov offers a browser extension for seamless coverage viewing on GitHub. Try it in Chrome or Firefox today! |
Wxh16144
approved these changes
Nov 3, 2023
Member
|
It was reverted since it no longer needed to be compatible with React 16, See #601. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
背景
在 ant-design/ant-design#45653 的 PR 中,为组件添加
autoFocus事件导致在 React 16 的 test case 中不会触发onFocus事件。问题由来
为错误打 console 可以发现,React 内部已经触发了
react-focus事件。问题是 React 16 没有把这个事件正确触发。错误信息来自于
rc-trigger调用了flushSync导致生命周期报错。相关部分
rc-slider
autoFocus属性会通过useEffect触发handleRef.current.focus方法触发聚焦。rc-trigger
rc-trigger对action标记为focus的事件添加监听事件,并且触发对应的triggerOpen逻辑。在 #415 中,
rc-trigger为支持disabled元素也能触发open而同时兼容旧版不支持pointerEvent浏览器所以同时保留了mouseEvent监听。所以当元素被悬浮时,会触发onPointerEnter和onMouseEnter事件。而在 React 18 中,这两个事件会被 batch update。导致通过
open是否变化来判断要触发onOpenChange的事件因为闭包问题导致会触发两次。所以在 #415 中,使用了flushSync确保两个事件之间不被 batch update 掉。报错原因
useEffect中触发的focus事件调用focus并触发rc-trigger的triggerOpen方法后调用flushSync事件。在 React 16 中,useEffect被视为生命周期进行中,导致在此不允许调用flushSync。而在 React 18,useEffect中不再视为上一个 render 的生命周期,因而focus事件触发的flushSync不会出现flushSync was called from inside a lifecycle method错误。解决方案
使用
useRef记录最后触发的open状态,如果相同就不再触发。该ref每次 render 都会被重置。