Skip to content

fix: List grid not working in React.Fragment or wrapped List.Item #24955

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

Merged
merged 3 commits into from
Jun 12, 2020
Merged

Conversation

afc163
Copy link
Member

@afc163 afc163 commented Jun 12, 2020

[中文版模板 / Chinese template]

🤔 This is a ...

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

🔗 Related issue link

close #24553
close #24828

💡 Background and solution

📝 Changelog

Language Changelog
🇺🇸 English Fix List grid not working in React.Fragment or wrapped List.Item
🇨🇳 Chinese 修复 List grid 属性在 React.Framgment 或者封装了的 List.Item 上失效的问题。

☑️ 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

View rendered components/list/demo/grid-test.md

@ant-design-bot
Copy link
Contributor

ant-design-bot commented Jun 12, 2020

@ant-design-bot
Copy link
Contributor

ant-design-bot commented Jun 12, 2020

@codesandbox-ci
Copy link

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 2da908b:

Sandbox Source
antd reproduction template Configuration
nifty-shannon-hk2bm Issue #24553
crazy-dewdney-zfdq7 Issue #24828
divine-brook-29oxr Issue #24828
small-sea-wn6oj Issue #24828

@codesandbox-ci
Copy link

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 8e1547e:

Sandbox Source
antd reproduction template Configuration
pensive-mendeleev-jgkdf Issue #24553
dazzling-goodall-lyyzj Issue #24828
competent-shadow-kqdzd Issue #24828
objective-tu-1bfyq Issue #24828

@afc163 afc163 merged commit 31a9fff into master Jun 12, 2020
@afc163 afc163 deleted the list branch June 12, 2020 10:11
@codesandbox-ci
Copy link

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 abf7b60:

Sandbox Source
antd reproduction template Configuration
magical-shaw-qbq3g Issue #24553
heuristic-liskov-dh3uj Issue #24828
ecstatic-browser-oi248 Issue #24828
compassionate-euler-jgg68 Issue #24828

@07akioni 07akioni mentioned this pull request Jun 14, 2020
@joelschou
Copy link

joelschou commented Jul 24, 2020

Hi. I'm not sure the best way to report this, but I'm fairly sure this PR represents a regression in how list items are displayed when in grid mode. By wrapping the {child} element in a <div> the element with className ant-col is no longer a direct child of ant-row. As a result, the columns do not stretch to being the same height. This can be easily seen by editing the grid demo in a browser web inspector to give one list longer content:

image

Edit to add: I should be clear, making the ant-col a child of ant-row again won't fix this on its own, it will simply allow the column to stretch to the full height of the row. The ant-list-item and ant-card nested inside the column still need to be told to stretch as well.

),
);
const childrenList = React.Children.map(items, (child: any, index) => (
<div key={keys[index]} style={colStyle}>

Choose a reason for hiding this comment

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

This is the regression I mentioned in my comment.

@JaKXz
Copy link
Contributor

JaKXz commented Aug 10, 2020

I think @joelschou is correct, has this been fixed in any future patches?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
4 participants