Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Popover and Popover arrow position, width and direction issues inside a table #24172

Closed
1 task done
StallionV opened this issue May 14, 2020 · 3 comments · Fixed by yiminghe/dom-align#53
Closed
1 task done
Assignees
Labels
🐛 Bug Ant Design Team had proved that this is a bug. Inactive

Comments

@StallionV
Copy link

StallionV commented May 14, 2020

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

Reproduction link

Edit on CodeSandbox

Steps to reproduce

  1. Create a table
  2. Ensure have a column which has a link or a button which can show a pop over
  3. Add a ConfigProvider to ensure popover scrolls with the rows
  4. Toggle the Ellipsis prop for column and see how the pop over width and position is affected. The popover is actually getting rendered inside the column.
  5. In some cases when there is not enough space to render pop over in its present direction, the direction changes but the popover arrow still points to the original direction not the new one
  6. Toggle the placement prop for popover, if you don't add it we notice the popover width is correct. Adding it somehow limits the width and sometimes also changes the popover direction
  7. Popover randomly changes direction showing a flick affect on screen. If first shows at one position and then switches quickly and shows at another making it appear like a glitch

What is expected?

  1. Playing with ellipsis prop in table or placement in popover, should not affected the popover so dramatically.
  2. Pop over arrow direction should show correctly in accordance with popover direction
  3. Before rendering pop over, if it is determined that the space may not be enough and the popover has to instead show up in a new place, do not render it twice. It shows popover at one place and then flicking to another.
  4. Pop over width should not change if placement prop is provided

What is actually happening?

  1. Playing with ellipsis prop in table or placement in popover, affects the popover. Ellipsis prop for table makes popover render inside the column, specially when it has a ConfigProvider
  2. Pop over arrow direction changes randomly sometimes, if popover direction changes
  3. When changes direction, pop over seems to render twice in some cases and so makes it appear like a glitch or flicker affect
  4. Pop over should width change in some cases if placement prop is provided
Environment Info
antd 4.2.2
React 16.13
System Mac OSX
Browser Safari 13.1, Chrome 80.0
@zombieJ zombieJ added the 🐛 Bug Ant Design Team had proved that this is a bug. label May 15, 2020
@zombieJ
Copy link
Member

zombieJ commented May 15, 2020

For expect.1, it's by design. Table ellipsis use html native ability which makes container as overflow:hidden. So if config getPopupContainer to parentNode, it cut as expect.

For placement dynamic change arrow not switch is a bug. I will take a look.

Simplify reprodce: https://codesandbox.io/s/jiben-ant-design-demo-gykub?file=/index.js

@StallionV
Copy link
Author

Thanks @zombieJ how about points 3 and 4.
Why does the width of pop over change and why does it render twice. I believe those are also bugs

@afc163
Copy link
Member

afc163 commented Aug 12, 2020

Close in yiminghe/dom-align#53

@afc163 afc163 closed this as completed Aug 12, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🐛 Bug Ant Design Team had proved that this is a bug. Inactive
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants