ant-design icon indicating copy to clipboard operation
ant-design copied to clipboard

Popover remains visible when component tree is suspended

Open insertmike opened this issue 3 years ago • 4 comments
trafficstars

Reproduction link

Edit on CodeSandbox

Steps to reproduce

  1. Open Popover by clicking on the Open Popover button
  2. Trigger suspense by clicking on the popover content button Hide and load data
  3. See popover remaining visible while the component tree is suspended.

What is expected?

The popover to be hidden.

What is actually happening?

The popover remains visible.

Environment Info
antd 4.23.6
React 17
System Linux
Browser Google Chrome

React.Suspense provide a lifecycle so components can handle the display:none removal. This can be used to handle this: https://github.com/facebook/react/issues/14536

insertmike avatar Oct 21 '22 13:10 insertmike

For the people facing this issue, you can use setTimeout to delay the suspense triggering action with 100 or 200ms in order for the popover to hide before react triggers the suspense api.

insertmike avatar Oct 21 '22 13:10 insertmike

Hello @insertmike. We totally like your proposal/feedback, welcome to send us a Pull Request for it. Please send your Pull Request to proper branch (feature branch for the new feature, master for bugfix and other changes), fill the Pull Request Template here, provide changelog/TypeScript/documentation/test cases if needed and make sure CI passed, we will review it soon. We appreciate your effort in advance and looking forward to your contribution!

你好 @insertmike,我们完全同意你的提议/反馈,欢迎直接在此仓库 创建一个 Pull Request 来解决这个问题。请将 Pull Request 发到正确的分支(新特性发到 feature 分支,其他发到 master 分支),务必填写 Pull Request 内的预设模板,提供改动所需相应的 changelog、TypeScript 定义、测试用例、文档等,并确保 CI 通过,我们会尽快进行 Review,提前感谢和期待您的贡献。

giphy

github-actions[bot] avatar Oct 23 '22 12:10 github-actions[bot]

Please assign this task to me .. If this is not assigned to anyone .. Thanks in advance ..

jazimabbas avatar Nov 01 '22 12:11 jazimabbas

PR is welcome @Jazim-Abbas

afc163 avatar Nov 01 '22 13:11 afc163

I am facing the same problem as you but I am using react-query while enable suspanse in useQuery

moussa32 avatar Jul 27 '23 14:07 moussa32