Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Slider range exchange tooltip blink #48536

Merged
merged 11 commits into from Apr 22, 2024
Merged

fix: Slider range exchange tooltip blink #48536

merged 11 commits into from Apr 22, 2024

Conversation

zombieJ
Copy link
Member

@zombieJ zombieJ commented Apr 18, 2024

中文版模板 / Chinese template

🤔 This is a ...

  • New feature
  • Bug fix
  • Site / documentation update
  • Demo update
  • Component style update
  • TypeScript definition update
  • Bundle size optimization
  • Performance optimization
  • Enhancement feature
  • Internationalization
  • Refactoring
  • Code style optimization
  • Test Case
  • Branch merge
  • Workflow
  • Other (about what?)

🔗 Related issue link

fix #48149

💡 Background and solution

rc-slider 在拖动释放时,会将元素顺序重新排序以确保无障碍访问顺序正确。这导致松开瞬间,两个元素互换导致 Tooltip 移动到另一个元素上再消失。看了一下 mui 的实现,在越过时也会有一个小闪动。解法:

  • 额外做一个虚元素对齐到激活态的元素上,并将 Tooltip 绑定到虚元素上实现与实际元素的隔离效果。
  • 添加一个 useRafLock 控制状态更新,使其在拖拽结束时一段时间内处理 滑块 的动画,这样就保证了滑块本身也不会出现闪动。

📝 Changelog

Language Changelog
🇺🇸 English Fix Slider in range tooltip blink when drag the handle over another one.
🇨🇳 Chinese 修复 Slider 在范围选择下,拖动滑块越过另一个滑块时提示框闪动的问题。

☑️ Self-Check before Merge

⚠️ Please check all items below before requesting a reviewing. ⚠️

  • Doc is updated/provided or not needed
  • Demo is updated/provided or not needed
  • TypeScript definition is updated/provided or not needed
  • Changelog is provided or not needed

Copy link

stackblitz bot commented Apr 18, 2024

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

Copy link
Contributor

github-actions bot commented Apr 18, 2024

👁 Visual Regression Report for PR #48536 Passed ✅

🎯 Target branch: master (0bc2e3a)
📖 View Full Report ↗︎

🎊 Congrats! No visual-regression diff found.

Copy link
Contributor

github-actions bot commented Apr 18, 2024

Preview is ready

Copy link

socket-security bot commented Apr 18, 2024

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package New capabilities Transitives Size Publisher
npm/rc-slider@10.6.0-3 environment 0 155 kB zombiej

🚮 Removed packages: npm/rc-slider@10.5.0

View full report↗︎

@li-jia-nan
Copy link
Member

这个不用放 feature 吗?

Copy link
Contributor

github-actions bot commented Apr 18, 2024

size-limit report 📦

Path Size
./dist/antd.min.js 336.99 KB (+390 B 🔺)
./dist/antd-with-locales.min.js 384.46 KB (+424 B 🔺)

Copy link

codesandbox-ci bot commented Apr 18, 2024

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

@yoyo837
Copy link
Contributor

yoyo837 commented Apr 18, 2024

这个不用放 feature 吗?

这是bugfix

@afc163
Copy link
Member

afc163 commented Apr 19, 2024

拖拽过程中最好 Tooltip 始终为 open={true},现在拖拽过程中一旦鼠标离开 Tooltip 会消失,这个体验也不太好。

@zombieJ
Copy link
Member Author

zombieJ commented Apr 19, 2024

拖拽过程中最好 Tooltip 始终为 open={true},现在拖拽过程中一旦鼠标离开 Tooltip 会消失,这个体验也不太好。

是不是没点到 handle 上?Slider 有个特性是点击条会就近选择一个点。这个点是没有事件的。

@afc163
Copy link
Member

afc163 commented Apr 19, 2024

是的,不过线上版本貌似没点到点上也不会有这个问题。

Copy link

socket-security bot commented Apr 19, 2024

👍 Dependency issues cleared. Learn more about Socket for GitHub ↗︎

This PR previously contained dependency changes with security issues that have been resolved, removed, or ignored.

View full report↗︎

@li-jia-nan
Copy link
Member

@SocketSecurity ignore npm/fsevents@1.2.13

MadCcc
MadCcc previously approved these changes Apr 19, 2024
Copy link

codecov bot commented Apr 19, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 100.00%. Comparing base (5fbca4a) to head (0794847).
Report is 6 commits behind head on master.

Additional details and impacted files
@@            Coverage Diff             @@
##            master    #48536    +/-   ##
==========================================
  Coverage   100.00%   100.00%            
==========================================
  Files          744       745     +1     
  Lines        12883     12994   +111     
  Branches      3369      3399    +30     
==========================================
+ Hits         12883     12994   +111     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@zombieJ zombieJ marked this pull request as ready for review April 22, 2024 02:25
@zombieJ zombieJ merged commit c321492 into master Apr 22, 2024
105 checks passed
@zombieJ zombieJ deleted the fix-slider branch April 22, 2024 02:26
@zombieJ zombieJ mentioned this pull request Apr 22, 2024
16 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

slider滑块多节点滑动时, tooltip 闪烁
5 participants