Skip to content

<Fragment> breaks <GridList> and <GridListTile> layout #19221

@murray-lang

Description

@murray-lang

When GridListTiles are wrapped in Fragment their layout is broken

  • The issue is present in the latest release.
  • I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Wrapping multiple GridListTile elements in a Fragment results in row and column layout being broken.

Expected Behavior 🤔

GridList and GridListTile layout should not be affected by Fragment

Steps to Reproduce 🕹

https://codesandbox.io/s/fragment-breaks-gridlisttile-96xtn

Context 🔦

I am using GridList as a convenience for tabular layout of data with headers for both rows and columns. Because the row header configuration comes from different state to the item values, the row cannot be rendered with a single Array.map(), so I tried to wrap the row items in a Fragment.

I am currently getting around the issue by joining the header and item configuration arrays into one, with a className property added to each object so that the appropriate style can be determined in the rendering JSX.

Your Environment 🌎

| Tech | Version |
| Linux Mint | 19.2 |
| Material-UI | v4.8.3 |
| React | 16.12.0 |
| Browser | Chrome v79.0.3945.88 (64bit) |

Metadata

Metadata

Assignees

No one assigned

    Labels

    scope: image listChanges related to the image list.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions