[material-ui][Masonry] layout forms a single column when the first item is hidden about material-ui

[DiegoAndai]

Hey @Fanzzzd, thanks for the report!

May I ask you to share the code of the live example? If you could share the stackblitz in editor mode, that would be great. This will help us understand the issue better.

[mbrookes]

Interestingly it only affects the initial layout. It's fine if it's hidden after it's rendered. (Literally "turn it off and on again" in dev-tools.)

https://stackblitz.com/edit/react-hhacxp?file=Demo.tsx

[Fanzzzd]

Hi @DiegoAndai ,

Here is the editor link to the live example: https://stackblitz.com/edit/react-nxweja?file=Demo.tsx

I observed the same behavior as @mbrookes mentioned. Once the Masonry layout is loaded, setting any element to display: none does not affect the layout.

Issue Analysis:
The issue where the Masonry layout forms a single column when the first item is hidden initially occurs because the layout calculations are based on the first child element. If this element is hidden, its height is zero, which triggers the skip condition. This condition is intended to handle cases where images haven’t loaded yet but also inadvertently causes problems when the first element is simply hidden.

Solution:
I modified the code to identify the first visible child instead of assuming the first child is visible. This ensures that the layout calculations use a visible element, avoiding the height zero issue. Additionally, I added checks to skip any children that are not visible during layout calculations, preventing them from affecting the layout logic.

With these changes, the Masonry layout should initialize correctly even if the initial item is hidden. If you like you can give it a try and plz let me know if it works!

[DiegoAndai]

Thanks for the live example @Fanzzzd. Accepted as a bug.