ant-design/ant-design

Tabs结合Popover会渲染两次Popover

Open

#27,699 opened on Nov 11, 2020

View on GitHub
 (2 comments) (0 reactions) (0 assignees)TypeScript (98,031 stars) (54,612 forks)batch import
Inactivehelp wanted🐛 Bug

Description

  • I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

https://stackblitz.com/edit/react-ua4iau?file=index.js

Steps to reproduce

Tabs中addIcon， 使用Popover ，通过 visible 属性控制浮层显示。会出现两个Popover

What is expected?

只出现一个Popover

What is actually happening?

会出现两个Popover

Environment Info
antd 4.8.2
React 16.8.6
System window7
Browser Google

Contributor guide

Tech stack
reacttypescript
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Basic React knowledgeFamiliarity with ant design components
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
40
Research direction
Investigate the Tabs component's rendering logic when using addIcon with Popover. Look at how the visible prop is handled and whether the Popover is being instantiated multiple times. The reproduction link shows a minimal code example. Check the ant design source code for Tabs and Popover components, particularly how Popover is toggled and if there is any lifecycle issue causing double render. Consider React's key or state management issues.