designable icon indicating copy to clipboard operation
designable copied to clipboard

fix(core): fix getClosestPosition error when component nesting

Open bcguan2008 opened this issue 2 years ago • 5 comments

问题

当组件嵌套了多个组件时,会发生 closestPosition 计算不对的问题

拿Card 举例,在 behavior 里设置了 Card 不能 append 到 Card

image

录制了一个 gif 图,拖拽滑动到子组件时光标位置计算不对。 拖拽到 input, textArea 和 password 分别发生了多次光标跳动,无法给予拖拽用户一个准确的预期

chrome-capture-2022-3-9

原因

getClosestPosition 方法做了 closestNode 的重计算(主要是 onMove 事件在方法外会修改 closestNode,所以重计算 closestNode 没有问题 ),但没有进行 isAfter 的重计算。

修复后效果 chrome-capture-2022-3-23

  • [x] Ensure the pull request title and commit message follow the Commit Specific in English.
  • [x] Fork the repo and create your branch from main.
  • [x] If you've added code that should be tested, add tests!
  • [x] If you've changed APIs, update the documentation.
  • [x] Ensure the test suite passes (npm test).
  • [x] Make sure your code lints (npm run lint) - we've done our best to make sure these rules match our internal linting guidelines.

bcguan2008 avatar Apr 23 '22 00:04 bcguan2008

Deploy Preview for designable-fusion ready!

Name Link
Latest commit 89cd01424ff2271c7e53c7332fd6126e19d73aa1
Latest deploy log https://app.netlify.com/sites/designable-fusion/deploys/626348f881e57b000977baa6
Deploy Preview https://deploy-preview-285--designable-fusion.netlify.app/
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

netlify[bot] avatar Apr 23 '22 00:04 netlify[bot]

Deploy Preview for designable-antd ready!

Name Link
Latest commit 89cd01424ff2271c7e53c7332fd6126e19d73aa1
Latest deploy log https://app.netlify.com/sites/designable-antd/deploys/626348f8343e8b00081905e5
Deploy Preview https://deploy-preview-285--designable-antd.netlify.app/
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

netlify[bot] avatar Apr 23 '22 00:04 netlify[bot]

现在main分支的最新版还存在这个问题吗

janryWang avatar Apr 25 '22 02:04 janryWang

现在main分支的最新版还存在这个问题吗

有的, 比较容易复现(按问题描述里的配置方式修改 formily/antd/src/components/Card/preview.tsx)

bcguan2008 avatar Apr 25 '22 07:04 bcguan2008

这个 check 报错信息好像 main 上就有

bcguan2008 avatar Apr 26 '22 11:04 bcguan2008