feat: Popover can be closed by ESC when trigger is focus or click #47928

CooperHash · 2024-03-17T14:39:21Z

🤔 This is a ...

🔗 Related issue link

💡 Background and solution

📝 Changelog

Language	Changelog
🇺🇸 English	Popover can be closed by ESC when trigger is `focus` or `click`.
🇨🇳 Chinese	Popover 当 `trigger` 是 `focus` 或 `click` 时能被 ESC 按键所关闭。

根据mdn的描述

popover弹出后，当点击esc后应该terminal，也就是回到关闭overlay回到原来的状态

改完前

default.mov

更改后

default.mov

p.s: 视频中的黑色弹出显示的是键盘按键esc

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

stackblitz · 2024-03-17T14:39:24Z

Run & review this pull request in StackBlitz Codeflow.

github-actions · 2024-03-17T14:39:34Z

👁 Visual Regression Report for PR #47928 Passed ✅

🎯 Target branch: feature (0b00db4)
📖 View Full Report ↗︎

🎊 Congrats! No visual-regression diff found.

github-actions · 2024-03-17T14:39:34Z

codesandbox-ci · 2024-03-17T14:45:07Z

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.

afc163 · 2024-03-18T02:13:23Z

but popconfirm is use cloneElment children to make onKeydown event to popup
And on Popup dont have children

<Popover>
  children
</Popover>

<Popconfirm>
  children
</Popconfirm>

Popconfirm 和 Popover 的结构应该是一致的吧，实际上 Popconfirm 底层就是调用的 Popover。

CooperHash · 2024-03-18T02:37:49Z

ok，我用了跟popconfirm完全一样的逻辑
但是hover popover点击esc没有效果，其他的focus、click倒是没有问题

CooperHash · 2024-03-18T02:42:10Z

ok，我用了跟popconfirm完全一样的逻辑但是hover popover点击esc没有效果，其他的focus、click倒是没有问题

default.mov

afc163 · 2024-03-18T03:58:42Z

hover 不应该被 ESC 影响的，符合预期。

components/popover/index.tsx

afc163 · 2024-03-18T05:37:34Z

afc163 · 2024-03-18T13:52:53Z

可以参考 Popconfirm 给 Popover 里也加一些相关的测试用例吧。

theiliad · 2024-03-18T17:50:39Z

love the energy @afc163 @CooperHash 🔥 Thanks for working so hard on antd, this is great! 🙌🏻

components/popover/index.tsx

afc163 · 2024-03-19T11:29:52Z

用例挂了，看看~

CooperHash · 2024-03-19T13:11:48Z

改了下，本地测试用例通过了

afc163 · 2024-03-19T15:00:11Z

size-limit report 📦

Path	Size
`./dist/antd.min.js`	335.03 KB (+259 B 🔺)
`./dist/antd-with-locales.min.js`	381.65 KB (+70 B 🔺)

CooperHash · 2024-03-20T02:39:09Z

i have no idea why size-limit exceeded

theiliad · 2024-03-20T17:34:44Z

@afc163 are we able to merge this? 🙂 I'm not sure what the process is, maybe you're waiting for other PRs to go in first?

Also wondering when it is merged, does it just go into the next weekly patch release?

afc163 · 2024-03-21T02:22:34Z

CI is still broken: https://github.com/ant-design/ant-design/actions/runs/8357236624/job/22876161536?pr=47928

CooperHash · 2024-03-21T02:34:14Z

i have no idea why size-limit exceeded

it seems always size-limit problem

afc163 · 2024-03-21T03:00:21Z

codecov · 2024-03-21T04:04:36Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 100.00%. Comparing base (0b00db4) to head (d127966).

Additional details and impacted files

@@            Coverage Diff            @@
##           feature    #47928   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          739       739           
  Lines        12679     12688    +9     
  Branches      3333      3334    +1     
=========================================
+ Hits         12679     12688    +9

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

CooperHash · 2024-03-21T04:06:45Z

seems test is ok, but size limit is still break

components/popconfirm/__tests__/index.test.tsx

CooperHash · 2024-03-21T15:00:07Z

@afc163 all prepare, can take a look. thanks

github-actions · 2024-03-22T02:34:28Z

🎉 Thank you for your contribution! If you have not yet joined our DingTalk community group, please feel free to join us (when joining, please provide the link to this PR).

🎉 感谢您的贡献！如果您还没有加入钉钉社区群，请扫描下方二维码加入我们（加群时请提供此 PR 链接）。

* fix: consistent with the tag component, the processing state uses colorInfo token. (#47695) Signed-off-by: pfdgithub <pfdgithub@users.noreply.github.com> * feat: Notification support aria-* in closable (#47710) * feat: Notification support aria-* in closable * feat: optimize code * Cascader support option render (#47727) * feat: done * feat: doc * feat: improve Transfer `key` type (#47879) * feat: add Transfer's key type * docs: update prop * fix: key type * fix: cycle dependency * chore: update size limit (#47903) Signed-off-by: Amumu <yoyo837@hotmail.com> * chore: update size limit (#47904) * feat: add Uzbek(latn) locale (#47899) * feat: add Uzbek(latn) locale * size-limit * Update docs/react/i18n.zh-CN.md Co-authored-by: afc163 <afc163@gmail.com> Signed-off-by: Amumu <yoyo837@hotmail.com> --------- Signed-off-by: Amumu <yoyo837@hotmail.com> Co-authored-by: afc163 <afc163@gmail.com> Co-authored-by: lijianan <574980606@qq.com> * feat: support `showSorterTooltip.target` for Table sorters (#47409) * Added `sorterTooltipTarget` prop for table sorters * demo updated * updated snapshot * updated snapshot * moved table tooltip target to `showSorterTooltip` * fix * updated docs * empty commit * updated version in docs --------- Co-authored-by: Alina Andrieieva <Alina_Andrieieva@epam.com> * feat: CP support FloatButton.Group closeIcon (#47953) * Typography support collapse (#47264) * feat: typograohy support collapse * feat: snap * feat: test * feat: 单测不符合预期 * feat: test * feat: 恢复 * feat: test * feat: test * feat: 修改命名 * feat: 代码优化 * feat: 添加控制台提示 * feat: snap * feat: symbol support function * feat: snap * fix: text * feat: snap * feat: api 修改 * feat: key 修改 * feat: 去掉参数 * feat: lint * feat: snap * feat: test * feat: use 2 * feat: review * feat: test * chore: part of it * chore: fix auto collapse logic * feat: 修改 doc 单测 * feat: doc * test: update testcase * docs: add more --------- Co-authored-by: 二货机器人 <smith3816@gmail.com> * feat: Table support onScroll event (#47986) * feat: Popover can be closed by ESC when trigger is focus or click (#47928) * feat:Add keydown event to handle escape * fix * fix:use exact same logic with popconfirm * fix:move same logic from popconfirm to popover * fix * fix * add test * fix * fix * fix * test size-limit * fix * fix popconfirm test * fix * fix --------- Co-authored-by: afc163 <afc163@gmail.com> * chore: update size-limit (#48014) * feat: steps support for circular progress bar (#47940) * feat: steps support for circular progress bar * Update components/progress/index.zh-CN.md Co-authored-by: afc163 <afc163@gmail.com> Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/index.en-US.md Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/index.en-US.md Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/index.zh-CN.md Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/index.zh-CN.md Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/index.en-US.md Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/progress.tsx Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/__tests__/index.test.tsx Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/demo/circle-steps.tsx Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/index.en-US.md Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/index.en-US.md Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/index.zh-CN.md Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/index.zh-CN.md Signed-off-by: lijianan <574980606@qq.com> * Update circle-steps.tsx * Update components/progress/progress.tsx Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/index.zh-CN.md Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/index.zh-CN.md Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/index.en-US.md Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/index.en-US.md Signed-off-by: lijianan <574980606@qq.com> * Update package.json * Update components/progress/demo/circle-steps.md Co-authored-by: afc163 <afc163@gmail.com> Signed-off-by: lijianan <574980606@qq.com> --------- Signed-off-by: lijianan <574980606@qq.com> Co-authored-by: lijianan <574980606@qq.com> Co-authored-by: afc163 <afc163@gmail.com> * demo: update Progress demo (#48052) * demo: update Progress demo * fix: fix * fix: fix * fix: fix * fix: update snap * chore: update size-limit (#48098) * feat: add Scrollbar css token (#48109) * feat: add Scrollbar css token * docs: update docs * feat: upgrade react-slick (#48093) * feat: upgrade react-slick * test: update snapshots * test: update snapshots --------- Co-authored-by: lijianan <574980606@qq.com> * Revert "feat: add Scrollbar css token (#48109)" (#48115) This reverts commit d0cc93b. * feat: Input.OTP component support (#48076) * chore: basic control * chore: input instad * docs: update demo * chore: adjust operation interactive * chore: lock selection * chore: fix patch logic * chore: merge logic * chore: patch autoFocus * test: update snapshot * test: add test case * test: coverage * chore: update size limit * docs: update docs * test: fix test case * chore: update comment * refactor: change to length * chore: blur all * chore: size limit * fix: Upload remove margin using flex display (#48091) * fix: remove upload margin with flex * fix * use support not * fix * feat: copy support async (#48123) * feat: copy support async * feat: add test * feat: doc * feat: snap * feat: add loading * feat: 恢复 try * feat: 判断是否是 Error * feat: throw error * feat: 为了醋包了饺子 * feat: remove code * feat: add loading test * fix: test * fix: icon import way * chore: improve test case code * chore: improve test case code --------- Co-authored-by: afc163 <afc163@gmail.com> * feat: Table add `rowHoverable` to disable hover interaction (#48112) * feat: Tag support aria-* in closable (#47678) * feat: Tag support aria-* in closable * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * refactor: useClosable * chore: modal * fix: check logic * chore: clean up * feat: optimize code * feat: optimize code --------- Signed-off-by: kiner-tang <1127031143@qq.com> Co-authored-by: 二货机器人 <smith3816@gmail.com> --------- Signed-off-by: pfdgithub <pfdgithub@users.noreply.github.com> Signed-off-by: Amumu <yoyo837@hotmail.com> Signed-off-by: lijianan <574980606@qq.com> Signed-off-by: kiner-tang <1127031143@qq.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: pfdgithub <pfdgithub@users.noreply.github.com> Co-authored-by: kiner-tang <1127031143@qq.com> Co-authored-by: 叶枫 <7971419+crazyair@users.noreply.github.com> Co-authored-by: lijianan <574980606@qq.com> Co-authored-by: 章鱼怪 <hi.madocto@gmail.com> Co-authored-by: Amumu <yoyo837@hotmail.com> Co-authored-by: afc163 <afc163@gmail.com> Co-authored-by: Alina Andrieieva <emilialina@list.ru> Co-authored-by: Alina Andrieieva <Alina_Andrieieva@epam.com> Co-authored-by: 二货机器人 <smith3816@gmail.com> Co-authored-by: Cooper <73218815+CooperHash@users.noreply.github.com> Co-authored-by: yykoypj <601924094@qq.com>

feat:Add keydown event to handle escape

ff927b4

CooperHash mentioned this pull request Mar 17, 2024

feat:Add keydown event to handle escape #47914

Closed

20 tasks

fix

adbf29b

fix:use exact same logic with popconfirm

50bad7e

afc163 reviewed Mar 18, 2024

View reviewed changes

components/popover/index.tsx Show resolved Hide resolved

CooperHash added 2 commits March 18, 2024 12:45

fix:move same logic from popconfirm to popover

dafe0ac

fix

d61b259

CooperHash changed the title ~~feat:Add keydown event to handle escape~~ feat: Add keydown event to handle escape Mar 18, 2024

CooperHash and others added 2 commits March 18, 2024 13:43

fix

a7a2979

Merge branch 'feature' into feature

e6f409f

afc163 changed the title ~~feat: Add keydown event to handle escape~~ feat: Popover can be closed by ESC when trigger is focus or click Mar 18, 2024

add test

a8472fe

afc163 reviewed Mar 19, 2024

View reviewed changes

components/popover/index.tsx Show resolved Hide resolved

fix

d03053d

fix

ee48854

CooperHash and others added 2 commits March 19, 2024 21:17

Merge branch 'feature' into feature

d79aa60

fix

ee078f3

test size-limit

e76e012

CooperHash and others added 2 commits March 20, 2024 11:20

fix

ff43d71

Merge branch 'feature' into feature

afb2280

afc163 previously approved these changes Mar 20, 2024

View reviewed changes

fix popconfirm test

e900f6c

CooperHash dismissed afc163’s stale review via e900f6c March 21, 2024 03:46

Merge branch 'feature' into feature

9faef2b

afc163 reviewed Mar 21, 2024

View reviewed changes

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

CooperHash added 2 commits March 21, 2024 18:45

fix

85a5f1f

fix

d127966

afc163 approved these changes Mar 22, 2024

View reviewed changes

afc163 merged commit ca6c932 into ant-design:feature Mar 22, 2024
61 checks passed

afc163 mentioned this pull request Mar 22, 2024

click-triggered Popover not closing when ESC pressed #47887

Closed

MadCcc mentioned this pull request Mar 31, 2024

docs: changelog 5.16.0 #48191

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Popover can be closed by ESC when trigger is focus or click #47928

feat: Popover can be closed by ESC when trigger is focus or click #47928

CooperHash commented Mar 17, 2024 •

edited by afc163

stackblitz bot commented Mar 17, 2024

github-actions bot commented Mar 17, 2024 •

edited

github-actions bot commented Mar 17, 2024 •

edited

codesandbox-ci bot commented Mar 17, 2024 •

edited

afc163 commented Mar 18, 2024

CooperHash commented Mar 18, 2024

CooperHash commented Mar 18, 2024

afc163 commented Mar 18, 2024

afc163 commented Mar 18, 2024

afc163 commented Mar 18, 2024

theiliad commented Mar 18, 2024

afc163 commented Mar 19, 2024

CooperHash commented Mar 19, 2024

afc163 commented Mar 19, 2024

CooperHash commented Mar 20, 2024

theiliad commented Mar 20, 2024 •

edited

afc163 commented Mar 21, 2024

CooperHash commented Mar 21, 2024

afc163 commented Mar 21, 2024

codecov bot commented Mar 21, 2024 •

edited

CooperHash commented Mar 21, 2024

CooperHash commented Mar 21, 2024

github-actions bot commented Mar 22, 2024

feat: Popover can be closed by ESC when trigger is focus or click #47928

feat: Popover can be closed by ESC when trigger is focus or click #47928

Conversation

CooperHash commented Mar 17, 2024 • edited by afc163

🤔 This is a ...

🔗 Related issue link

💡 Background and solution

📝 Changelog

☑️ Self-Check before Merge

stackblitz bot commented Mar 17, 2024

github-actions bot commented Mar 17, 2024 • edited

👁 Visual Regression Report for PR #47928 Passed ✅

github-actions bot commented Mar 17, 2024 • edited

codesandbox-ci bot commented Mar 17, 2024 • edited

afc163 commented Mar 18, 2024

CooperHash commented Mar 18, 2024

CooperHash commented Mar 18, 2024

afc163 commented Mar 18, 2024

afc163 commented Mar 18, 2024

afc163 commented Mar 18, 2024

theiliad commented Mar 18, 2024

afc163 commented Mar 19, 2024

CooperHash commented Mar 19, 2024

afc163 commented Mar 19, 2024

size-limit report 📦

CooperHash commented Mar 20, 2024

theiliad commented Mar 20, 2024 • edited

afc163 commented Mar 21, 2024

CooperHash commented Mar 21, 2024

afc163 commented Mar 21, 2024

codecov bot commented Mar 21, 2024 • edited

Codecov Report

CooperHash commented Mar 21, 2024

CooperHash commented Mar 21, 2024

github-actions bot commented Mar 22, 2024

CooperHash commented Mar 17, 2024 •

edited by afc163

github-actions bot commented Mar 17, 2024 •

edited

github-actions bot commented Mar 17, 2024 •

edited

codesandbox-ci bot commented Mar 17, 2024 •

edited

theiliad commented Mar 20, 2024 •

edited

codecov bot commented Mar 21, 2024 •

edited