fix: transfer label height

[kovsu]

🤔 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

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

修复：

->

📝 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))

[bolt-new-by-stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[github-actions]

[yoyo837]

Vue 的? 这里是 React 的哦

[kovsu]

Vue 的? 这里是 React 的哦

一样的有这个问题

[argos-ci]

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]

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.

[yoyo837]

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

[kovsu]

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

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

[kovsu]

@yoyo837
复现：https://stackblitz.com/edit/react-1vdbcd?file=index.css,demo.tsx

你点击箭头指向的那块会触发两次 onSelectChange 事件

[yoyo837]

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

无法复现呢

[kovsu]

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

[yoyo837]

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

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

[yoyo837]

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

[kovsu]

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

[kovsu]

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

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

[yoyo837]

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

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

看到了

[kovsu]

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

[yoyo837]

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

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

[yoyo837]

Please rebase upstream.

[yoyo837]

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

[yoyo837]

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