- I have searched the issues of this repository and believe that this is not a duplicate.
Reproduction link
Steps to reproduce
I forked one of the examples from the Popover component docs. Click either the TR or BR buttons and you should see the issue.
The popover loops through calculated css values.
What is expected?
The Popover renders and remains static, as with each other placement value.
What is actually happening?
The component's css continually recalculates.
| Environment | Info |
| ------------ | ------------ |
| antd | 4.18.3 |
| React | 16.14.0 |
| System | Windows |
| Browser | Chrome |
6条答案
按热度按时间xjreopfe1#
Some further details for context...
Image of code in development where I discovered this issue...
This is an edge case in our system, the popover title is unlikely to be large enough to cause the issue (it has to be long enough to cause the popover title to require more than one line according the the pc resolution or browser size). It requires the existence of a scrollbar (in this case due to enough results listed in the table to cause results to render off screen...
As a temporary workaround I have introduced truncation of the popover title to 100 characters...
I've also included some footage here to show the issue, excuse the poor quality.
https://user-images.githubusercontent.com/73699185/149554830-b5ac9fcd-5552-426a-98a4-a57705bf2440.mp4
I had a little look at some code to see if I could find the culprit, my best bet is the onPopupAlign function of tooltip/index.tsx
0tdrvxhp2#
https://codesandbox.io/s/placement-antd-4-18-3-forked-i4t88
you should set
maxWidth: '300px'
on the title directly rather than outside componentsrxztt3cl3#
The purpose of setting the max width on the parent element was just to reproduce the issue, not an attempt to resolve it.
gajydyqb4#
It seems that the
float: right
causes this problem. If the parent element is notfloat
, the render will remain static, withtopRight
andbottomRight
.ht4b089n5#
That css I've added is just to recreate the scenario as I found it while developing and therefore reproduce the issue,
float: right
because I found that it occurs when the popover is rendered at the right edge of the screen.The key here is simply that the weird looping calculated css shouldn't occur.
dwbf0jvd6#
Same problem here on version 5.9.3:
Snippet:
Seems that the problem is caused because the popover is close to the end of the screen, positioned by the parent with:
Our workaround was to fix the
placement
for "bottomRight".