ant-design Popover - TopRight/BottomRight placement causes css calculation loop under certain conditions

vs3odd8k  于 3个月前  发布在  其他
关注(0)|答案(6)|浏览(98)
  • I have searched the issues of this repository and believe that this is not a duplicate.

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 |

xjreopfe

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

0tdrvxhp

0tdrvxhp2#

https://codesandbox.io/s/placement-antd-4-18-3-forked-i4t88

you should set maxWidth: '300px' on the title directly rather than outside components

rxztt3cl

rxztt3cl3#

The purpose of setting the max width on the parent element was just to reproduce the issue, not an attempt to resolve it.

gajydyqb

gajydyqb4#

It seems that the float: right causes this problem. If the parent element is not float , the render will remain static, with topRight and bottomRight .

ht4b089n

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.

dwbf0jvd

dwbf0jvd6#

Same problem here on version 5.9.3:

Snippet:

<Popover
      content={title ?? <strong>{name}</strong>}
      trigger="click"
      className={styles.avatarPopover}
    >
      {content}
    </Popover>
.avatarPopover {
  cursor: pointer;
}

Seems that the problem is caused because the popover is close to the end of the screen, positioned by the parent with:

.header {
  position: sticky;
  top: 0;
  z-index: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: var(--spacings--sMedium);
  padding-right: var(--spacings--lXS);
  background-color: var(--colors--neutralLightest);
}

Our workaround was to fix the placement for "bottomRight".

相关问题