feat: ⌨️ Popconfirm can be closed by pressing ESC #24420
Conversation
![tests-checker[bot]](https://avatars.githubusercontent.com/in/17064?s=60&v=4){kind=small}
|
|
components/popconfirm/index.tsx
Outdated
| const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => { | ||
| if (e.key === 'Escape' && e.target === innerContentRef.current) { | ||
| settingVisible(false, e); | ||
| } |
There was a problem hiding this comment.
还要判断一下 e.target === innerContentRef.current ，学习了 😂
components/popconfirm/index.tsx
Outdated
| React.useEffect(() => { | ||
| const timeout = setTimeout(() => { | ||
| if (visible) { | ||
| innerContentRef.current?.focus(); | ||
| } | ||
| }); | ||
| return () => { | ||
| clearTimeout(timeout); | ||
| }; | ||
| }, [visible]); |
There was a problem hiding this comment.
如果在 Popconfirm 受控的情况下，切换了 focus 就不能按 Esc 退出了吧？
找了下默认是怎么做到在外部点击关闭弹窗的，应该是这里 。那么即使在受控的情况下，也不用自己监听外部点击事件了，配置 onVisibleChange 就行了啊。之前还琢磨怎么自己监听实现呢 _(:3J∠)_
Codecov Report
@@ Coverage Diff @@
## feature #24420 +/- ##
========================================
Coverage 98.95% 98.95%
========================================
Files 364 364
Lines 7391 7398 +7
Branches 2000 2054 +54
========================================
+ Hits 7314 7321 +7
Misses 77 77
Continue to review full report at Codecov.
|
components/popconfirm/index.tsx
Outdated
| React.useEffect(() => { | ||
| const timeout = setTimeout(() => { | ||
| if (visible) { | ||
| innerContentRef.current?.focus(); |
There was a problem hiding this comment.
这样键盘交互焦点就丢了，是不是可以考虑全局监听一下。打开的时候 ESC 关闭？
There was a problem hiding this comment.
直接绑定在 trigger 上好了，全局监听就复杂了。
components/popconfirm/index.tsx
Outdated
| @@ -72,6 +78,12 @@ const Popconfirm = React.forwardRef<unknown, PopconfirmProps>((props, ref) => { | |||
| } | |||
| }; | |||
|
|
|||
| const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => { | |||
| if (e.key === 'Escape' && visible) { | |||
|
/rebase |
github-actions
bot
force-pushed
the
feat-popconfirm-esc
branch
from
27e4935
to
1413693
Compare
|
超了 0.1 kB.. |
|
Need to approve |
[中文版模板 / Chinese template]
🤔 This is a ...
🔗 Related issue link
💡 Background and solution
close #15203
📝 Changelog
ESCnow.ESC关闭。☑️ Self Check before Merge