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鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: support table getPopupContainer on row selections #22787

Merged
merged 4 commits into from Apr 1, 2020

Conversation

MYKEU
Copy link
Contributor

@MYKEU MYKEU commented Mar 31, 2020

馃 This is a ...

  • New feature
  • Bug fix
  • Site / document update
  • Component style update
  • TypeScript definition update
  • Refactoring
  • Code style optimization
  • Test Case
  • Branch merge
  • Other (about what?)

馃敆 Related issue link

馃挕 Background and solution

Currently, the the row selection dropdown does not support getPopupContainer from the Table component when defined by the user.

This should fix problems that may occur if the table is within a scroll container - ie: https://codesandbox.io/s/custom-selection-ant-design-demo-gz9dh (hover over the dropdown to display the row selections, then scroll down).

馃摑 Changelog

Language Changelog
馃嚭馃嚫 English Table row selection dropdown should now support getPopupContainer
馃嚚馃嚦 Chinese

鈽戯笍 Self Check before Merge

鈿狅笍 Please check all items below before review. 鈿狅笍

  • Doc is updated/provided or not needed
  • Demo is updated/provided or not needed
  • TypeScript definition is updated/provided or not needed
  • Changelog is provided or not needed

Copy link

@tests-checker tests-checker bot left a comment

Could you please add tests to make sure this change works as expected?

@ant-design-bot
Copy link
Contributor

@ant-design-bot ant-design-bot commented Mar 31, 2020

@codesandbox-ci
Copy link

@codesandbox-ci codesandbox-ci bot commented Mar 31, 2020

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 6fbd673:

Sandbox Source
antd reproduction template Configuration
Custom selection - Ant Design Demo PR

@codesandbox-ci
Copy link

@codesandbox-ci codesandbox-ci bot commented Mar 31, 2020

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit dd13a1b:

Sandbox Source
antd reproduction template Configuration
Custom selection - Ant Design Demo PR

@codecov
Copy link

@codecov codecov bot commented Mar 31, 2020

Codecov Report

Merging #22787 into master will not change coverage.
The diff coverage is 100%.

Impacted file tree graph

@@           Coverage Diff           @@
##           master   #22787   +/-   ##
=======================================
  Coverage   98.28%   98.28%           
=======================================
  Files         360      360           
  Lines        7213     7213           
  Branches     1981     1982    +1     
=======================================
  Hits         7089     7089           
  Misses        124      124
Impacted Files Coverage 螖
components/table/Table.tsx 99.2% <100%> (酶) 猬嗭笍
components/table/hooks/useSelection.tsx 98.32% <100%> (酶) 猬嗭笍

Continue to review full report at Codecov.

Legend - Click here to learn more
螖 = absolute <relative> (impact), 酶 = not affected, ? = missing data
Powered by Codecov. Last update dc4d98a...dd13a1b. Read the comment docs.

right: 0;
transform: translate(100%, -50%);
top: 0;
right: -10px;
Copy link
Member

@afc163 afc163 Apr 1, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Any reason to change styles?

Copy link
Contributor Author

@MYKEU MYKEU Apr 1, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using transform creates a new stacking context on the element - resulting into the dropdown rendering behind the text of each row.

Another solution would be to keep the previous styles but add z-index: 1 to it as well. If you prefer that approach, I can change it.

Copy link
Member

@afc163 afc163 Apr 1, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

z-index: 1 may cause more side effect, let's follow your way.

BTW, Could you help to add cursor style to dropdown arrow? It seems to be lost in v4.

Co-Authored-By: 鍋忓彸 <afc163@gmail.com>
@afc163 afc163 merged commit 06f29d0 into ant-design:master Apr 1, 2020
20 checks passed
@ycjcl868 ycjcl868 mentioned this pull request Apr 3, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants