[material-ui][Grid2] Child Grids in custom component are not aligned on the same row as expected

[Tasin5541]

Steps to reproduce

Link to live example: https://stackblitz.com/edit/react-2x2v7n?file=Demo.tsx

Steps:

1. Notice that the two buttons in the FormButton component are displayed on separate rows even though each has size={6} defined.
2. The same buttons are displayed on the same row if Grid is used directly instead of Custom Component.

Current behavior

The buttons are rendered on separate rows when using the FormButton component, even though they should be on the same row.

Expected behavior

The two buttons, "Search" and "Reset", should be displayed side by side in the same row, similar to the second Grid example where the button code is directly in the JSX.

Context

We recently upgraded our project from MUI v5 to v6. Our application layouts heavily depend on Grid. We tried replacing the deprecated version with Grid2 and ran into this issue.

Your environment

npx @mui/envinfo

  System: OS: Windows 11 10.0.22631
  Binaries:
    Node: 20.12.2 - C:\Program Files\nodejs\node.EXE
    npm: 10.5.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: Not Found
  Browsers:
    Chrome: 129.0.6668.90
    Edge: Chromium (129.0.2792.52)
  npmPackages:
    @emotion/react: ^11.13.3 => 11.13.3
    @emotion/styled: ^11.13.0 => 11.13.0
    @mui/core-downloads-tracker:  6.1.2
    @mui/icons-material: ^6.1.2 => 6.1.2
    @mui/material: ^6.1.2 => 6.1.2
    @mui/private-theming:  6.1.2
    @mui/styled-engine:  6.1.2
    @mui/system:  6.1.2
    @mui/types:  7.2.17
    @mui/utils:  6.1.2
    @types/react: ^18.3.11 => 18.3.11
    react: ^18.3.1 => 18.3.1
    react-dom: ^18.3.1 => 18.3.1
    typescript: ^5.2.2 => 5.5.3

Search keywords: Grid, Grid2, Grids in custom component

[DiegoAndai]

Hey @Tasin5541! Thanks for the report. This should've been fixed with #43733, which has just been released in 6.1.3. Could you try it with that version? 😊

Here's the updated example: https://codesandbox.io/p/sandbox/issue-44037-updated-n47gsw?file=%2Fsrc%2FApp.tsx

[Tasin5541]

Hey @Tasin5541! Thanks for the report. This should've been fixed with #43733, which has just been released in 6.1.3. Could you try it with that version? 😊

Here's the updated example: https://codesandbox.io/p/sandbox/issue-44037-updated-n47gsw?file=%2Fsrc%2FApp.tsx

The issue with the custom component is fixed. However, we have found another issue where textfield and labels are not taking proper space (works fine with the deprecated Grid).
https://stackblitz.com/edit/react-rgn3zf?file=Demo.tsx
Let me know if I need to create a new bug for this. I thought this issue would get fixed automatically if the reported issue got fixed.

[DiegoAndai]

@Tasin5541 sorry for the late reply, I was out of office.

Please open a new issue describing the behavior. This makes things easier for us to track. Feel free to assign me to it when you do.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@Tasin5541 How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.