dialog icon indicating copy to clipboard operation
dialog copied to clipboard

fix: transformOrigin calculated by mousePosition on React 18

Open ousiri opened this issue 2 years ago • 6 comments

在React 18中第一次打开可以正确地从按钮位置展开弹出框,但是第二次之后则从错误的位置展开。

Ant Design的Modal也受到影响:CodeSandbox

ezgif com-video-to-gif

ousiri avatar Jul 23 '22 15:07 ousiri

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated
dialog ✅ Ready (Inspect) Visit Preview Oct 29, 2022 at 9:20AM (UTC)

vercel[bot] avatar Jul 23 '22 15:07 vercel[bot]

Codecov Report

Merging #292 (ce40350) into master (c49bc5e) will not change coverage. The diff coverage is 100.00%.

@@           Coverage Diff           @@
##           master     #292   +/-   ##
=======================================
  Coverage   98.69%   98.69%           
=======================================
  Files           7        7           
  Lines         153      153           
  Branches       47       47           
=======================================
  Hits          151      151           
  Misses          1        1           
  Partials        1        1           
Impacted Files Coverage Δ
src/Dialog/index.tsx 100.00% <100.00%> (ø)

:mega: We’re building smart automated test selection to slash your CI/CD build times. Learn more

codecov[bot] avatar Aug 08 '22 09:08 codecov[bot]

这个问题原因是 rc-dialogonEnterPrepare 函数里 offset 没有取到 lefttop 参数,导致没有计算出 transformOrigin

原因是打开 Modal 的时候 .rc-dialog-wrap 元素上的 display: none 没有立即去掉,导致 el.getBoundingClientRect() 获取的值都是 0

改成 useLayoutEffect 后,的确可以让 setAnimatedVisible(true) 快点生效,从而让 display: none 立即去掉。

(因为父元素有 display: none 的时候,子元素是无法从 getBoundingClientRect() 得到结果的。)

<div
        tabIndex={-1}
        onKeyDown={onWrapperKeyDown}
        className={classNames(`${prefixCls}-wrap`, wrapClassName)}
        ref={wrapperRef}
        onClick={onWrapperClick}
        style={{ zIndex, ...wrapStyle, display: !animatedVisible ? 'none' : null }}
        {...wrapProps}
>

不过这样 SSR 下不知道有没有坑。。好像改成 useMemo 也可以?

Next 下得跑跑看。。。没问题就合并叭。。。坐等解决

@zombieJ 大佬抽空看看8

izhouteng avatar Aug 11 '22 15:08 izhouteng

@zombieJ 看看

afc163 avatar Aug 15 '22 05:08 afc163

我自己测试发现主要原因是useEffect和useLayoutEffect里setState后组件rerender的顺序,React17和React18下表现略有不同。

yuningjiang123 avatar Aug 17 '22 04:08 yuningjiang123

改为使用rc-util的useLayoutEffect,会判断在ssr环境中切换成useEffect

ousiri avatar Sep 01 '22 10:09 ousiri

/rebase

afc163 avatar Oct 29 '22 09:10 afc163