feat: ⌨️ Popconfirm can be closed by pressing ESC #24420

afc163 · 2020-05-23T11:57:52Z

🤔 This is a ...

🔗 Related issue link

💡 Background and solution

📝 Changelog

Language	Changelog
🇺🇸 English	Popconfirm can be closed by pressing `ESC` now.
🇨🇳 Chinese	Popconfirm 支持按 `ESC` 关闭。

☑️ Self Check before Merge

⚠️ Please check all items below before review. ⚠️

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

tests-checker

Could you please add tests to make sure this change works as expected?

ant-design-bot · 2020-05-23T12:01:42Z

yunsii · 2020-05-23T14:02:37Z

components/popconfirm/index.tsx

+  const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (e.key === 'Escape' && e.target === innerContentRef.current) {
+      settingVisible(false, e);
+    }


还要判断一下 e.target === innerContentRef.current ，学习了 😂

yunsii · 2020-05-23T14:27:35Z

components/popconfirm/index.tsx

+  React.useEffect(() => {
+    const timeout = setTimeout(() => {
+      if (visible) {
+        innerContentRef.current?.focus();
+      }
+    });
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [visible]);


如果在 Popconfirm 受控的情况下，切换了 focus 就不能按 Esc 退出了吧？

找了下默认是怎么做到在外部点击关闭弹窗的，应该是这里。那么即使在受控的情况下，也不用自己监听外部点击事件了，配置 onVisibleChange 就行了啊。之前还琢磨怎么自己监听实现呢 _(:3J∠)_

codecov · 2020-05-23T14:40:59Z

Codecov Report

Merging #24420 into feature will increase coverage by 0.00%.
The diff coverage is 100.00%.

@@           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

Impacted Files	Coverage Δ
components/popconfirm/index.tsx	`100.00% <100.00%> (ø)`

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 4b485d3...1413693. Read the comment docs.

zombieJ · 2020-05-23T15:19:31Z

components/popconfirm/index.tsx

+  React.useEffect(() => {
+    const timeout = setTimeout(() => {
+      if (visible) {
+        innerContentRef.current?.focus();


这样键盘交互焦点就丢了，是不是可以考虑全局监听一下。打开的时候 ESC 关闭？

直接绑定在 trigger 上好了，全局监听就复杂了。

zombieJ · 2020-05-24T02:55:16Z

components/popconfirm/index.tsx

@@ -72,6 +78,12 @@ const Popconfirm = React.forwardRef<unknown, PopconfirmProps>((props, ref) => {
    }
  };

+  const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (e.key === 'Escape' && visible) {


KeyCode.ESC

components/popconfirm/index.tsx

afc163 · 2020-05-25T03:50:14Z

/rebase

close #15203

afc163 · 2020-05-25T05:18:53Z

超了 0.1 kB..

afc163 · 2020-05-25T09:36:05Z

Need to approve

afc163 requested a review from zombieJ as a code owner May 23, 2020 11:57

pr-triage bot added the PR: unreviewed label May 23, 2020

tests-checker bot suggested changes May 23, 2020

View reviewed changes

pr-triage bot added PR: reviewed-changes-requested and removed PR: unreviewed labels May 23, 2020

afc163 changed the base branch from master to feature May 23, 2020 11:58

pr-triage bot added PR: unreviewed and removed PR: reviewed-changes-requested labels May 23, 2020

yunsii approved these changes May 23, 2020

View reviewed changes

zombieJ reviewed May 23, 2020

View reviewed changes

afc163 mentioned this pull request May 23, 2020

test: Back of test coverage #24418

Merged

13 tasks

zombieJ reviewed May 24, 2020

View reviewed changes

components/popconfirm/index.tsx Outdated Show resolved Hide resolved

afc163 added 8 commits May 25, 2020 03:50

feat: support ESC to close Popconfirm

8100bb8

close #15203

add test case

5a65a94

fix focus in other element inside inner-content

1a7cd36

no fit

7afbd50

fix snapshot

8fc2d71

refactor it

cc27056

use util cloneElement

f885139

fix test case

1413693

github-actions bot force-pushed the feat-popconfirm-esc branch from 27e4935 to 1413693 Compare May 25, 2020 03:51

yoyo837 approved these changes May 25, 2020

View reviewed changes

pr-triage bot added PR: reviewed-approved and removed PR: unreviewed labels May 25, 2020

afc163 merged commit c93400d into feature May 25, 2020

afc163 deleted the feat-popconfirm-esc branch May 25, 2020 09:44

pr-triage bot added PR: merged and removed PR: reviewed-approved labels May 25, 2020

zombieJ mentioned this pull request May 31, 2020

docs: 4.3.0 changelog #24607

Merged

13 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: ⌨️ Popconfirm can be closed by pressing ESC #24420

feat: ⌨️ Popconfirm can be closed by pressing ESC #24420

afc163 commented May 23, 2020 •

edited

Loading

tests-checker bot left a comment

ant-design-bot commented May 23, 2020 •

edited

Loading

yunsii May 23, 2020

yunsii May 23, 2020

codecov bot commented May 23, 2020 •

edited

Loading

zombieJ May 23, 2020

afc163 May 23, 2020

zombieJ May 24, 2020

afc163 commented May 25, 2020

afc163 commented May 25, 2020

afc163 commented May 25, 2020

feat: ⌨️ Popconfirm can be closed by pressing ESC #24420

feat: ⌨️ Popconfirm can be closed by pressing ESC #24420

Conversation

afc163 commented May 23, 2020 • edited Loading

🤔 This is a ...

🔗 Related issue link

💡 Background and solution

📝 Changelog

☑️ Self Check before Merge

tests-checker bot left a comment

Choose a reason for hiding this comment

ant-design-bot commented May 23, 2020 • edited Loading

yunsii May 23, 2020

Choose a reason for hiding this comment

yunsii May 23, 2020

Choose a reason for hiding this comment

codecov bot commented May 23, 2020 • edited Loading

Codecov Report

zombieJ May 23, 2020

Choose a reason for hiding this comment

afc163 May 23, 2020

Choose a reason for hiding this comment

zombieJ May 24, 2020

Choose a reason for hiding this comment

afc163 commented May 25, 2020

afc163 commented May 25, 2020

afc163 commented May 25, 2020

afc163 commented May 23, 2020 •

edited

Loading

ant-design-bot commented May 23, 2020 •

edited

Loading

codecov bot commented May 23, 2020 •

edited

Loading