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: transfer label height #44471

Merged
merged 1 commit into from
Aug 29, 2023
Merged

fix: transfer label height #44471

merged 1 commit into from
Aug 29, 2023

Conversation

kovsu
Copy link
Contributor

@kovsu kovsu commented Aug 28, 2023

🤔 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

vueComponent/ant-design-vue#6010
antd 同样存在这个问题

💡 Background and solution

fix: #44489

1

正常应该只是触发一次,但是触发了两次

修复:

->

📝 Changelog

Language Changelog
🇺🇸 English Keep the height of label tag with the height of the child span tag. Otherwise, when clicking on the area inside the label and outside the checkbox, the onSelectChange event will be triggered twice
🇨🇳 Chinese 让 label 的高度与子标签 span 的高度保持一致,否则当点击到 label内,checkbox外的区域时,会触发两次 onSelectChange 事件

☑️ 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

🚀 Summary

🤖 Generated by Copilot at 30b9576

Fix checkbox label alignment and improve transfer component usability. Add a CSS rule to &-checkbox in components/transfer/style/index.ts and make other changes related to accessibility, keyboard navigation, and style consistency.

🔍 Walkthrough

🤖 Generated by Copilot at 30b9576

  • Fix checkbox label alignment in transfer list ([link](https://github.com/ant-design/ant-design/pull/44471/files?diff=unified&w=0#diff-d9d90f3711c4b10ecac467dc5d915fd5e15d8398916ed340a5ca70968394f2cbR308-R311))

@stackblitz
Copy link

stackblitz bot commented Aug 28, 2023

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

@github-actions
Copy link
Contributor

github-actions bot commented Aug 28, 2023

@yoyo837
Copy link
Contributor

yoyo837 commented Aug 28, 2023

Vue 的? 这里是 React 的哦

@kovsu
Copy link
Contributor Author

kovsu commented Aug 28, 2023

Vue 的? 这里是 React 的哦

一样的有这个问题

@argos-ci
Copy link

argos-ci bot commented Aug 28, 2023

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build Status Details Updated (UTC)
default (Inspect) ✅ No change detected - Aug 29, 2023, 8:41 AM

@codecov
Copy link

codecov bot commented Aug 28, 2023

Codecov Report

Patch and project coverage have no change.

Comparison is base (bbbc3d9) 100.00% compared to head (0ad4780) 100.00%.
Report is 7 commits behind head on master.

Additional details and impacted files
@@            Coverage Diff            @@
##            master    #44471   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          661       662    +1     
  Lines        11231     11243   +12     
  Branches      3042      3043    +1     
=========================================
+ Hits         11231     11243   +12     
Files Changed Coverage Δ
components/transfer/style/index.ts 100.00% <ø> (ø)

... and 6 files with indirect coverage changes

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

@kovsu kovsu requested a review from yoyo837 August 28, 2023 11:20
@yoyo837
Copy link
Contributor

yoyo837 commented Aug 29, 2023

我的电脑没复现问题, 可以先提供一个复现链接吗?

@kovsu
Copy link
Contributor Author

kovsu commented Aug 29, 2023

我的电脑没复现问题, 可以先提供一个复现链接吗?

我的描述里面加了一个 gif 你可以看一下

@kovsu
Copy link
Contributor Author

kovsu commented Aug 29, 2023

@yoyo837
复现:https://stackblitz.com/edit/react-1vdbcd?file=index.css,demo.tsx
image
你点击箭头指向的那块会触发两次 onSelectChange 事件

@yoyo837
Copy link
Contributor

yoyo837 commented Aug 29, 2023

@yoyo837 复现:https://stackblitz.com/edit/react-1vdbcd?file=index.css,demo.tsx image 你点击箭头指向的那块会触发两次 onSelectChange 事件

无法复现呢

@kovsu
Copy link
Contributor Author

kovsu commented Aug 29, 2023

@yoyo837 啊这,那你看我截的图呢。问题其实就是 点击 label 那块既触发了 item 的 selectChange,然后 label 点击后又修改了 checkbox 的值又触发一次 selectChange

@yoyo837
Copy link
Contributor

yoyo837 commented Aug 29, 2023

@yoyo837 啊这,那你看我截的图呢。问题其实就是 点击 label 那块既触发了 item 的 selectChange,然后 label 点击后又修改了 checkbox 的值又触发一次 selectChange

但你提供的复现并不能复现, 所以暂时只能认为是正常的.

@yoyo837
Copy link
Contributor

yoyo837 commented Aug 29, 2023

你自己打开这个复现是能复现问题的吗?

@kovsu
Copy link
Contributor Author

kovsu commented Aug 29, 2023

@yoyo837 我把 label 放大了一点,你再看看复现链接

@kovsu
Copy link
Contributor Author

kovsu commented Aug 29, 2023

你自己打开这个复现是能复现问题的吗?

你可以看我最上面那条 贴的 gif

@yoyo837
Copy link
Contributor

yoyo837 commented Aug 29, 2023

你自己打开这个复现是能复现问题的吗?

你可以看我最上面那条 贴的 gif

看到了

@kovsu
Copy link
Contributor Author

kovsu commented Aug 29, 2023

@yoyo837 所以为什么你那里没复现成功 😂

@yoyo837
Copy link
Contributor

yoyo837 commented Aug 29, 2023

@yoyo837 所以为什么你那里没复现成功 😂

没get到复现手法, 已经能复现了

@yoyo837
Copy link
Contributor

yoyo837 commented Aug 29, 2023

Please rebase upstream.

@yoyo837
Copy link
Contributor

yoyo837 commented Aug 29, 2023

image

这个位置中英文都填一下, 基于用户角度解决的问题来描述.

@yoyo837
Copy link
Contributor

yoyo837 commented Aug 29, 2023

changelog应该提及会触发两次事件问题的修复.

@yoyo837 yoyo837 merged commit 9c494ab into ant-design:master Aug 29, 2023
58 checks passed
@kovsu kovsu deleted the fix-modal-label branch September 4, 2023 00:53
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.

checkbox onSelectChange event of the transfer component runs repeatedly
2 participants