[material-ui][TextField] Text Fields are suddenly overflowing when using versions newer than 6.0.0-alpha.9

[EliasVal]

Steps to reproduce

Link to live example: (required)

Steps:

1. Lay out some TextFields wrapped in divs, to restrict size
2. See correct behavior in v6.0.0-alpha.9
3. Update to a newer version
4. See that the TextFields suddenly overflow the divs

Current behavior

Incorrect TextField sizing (v6.0.0-alpha.10+)

Expected behavior

Correct TextField sizing (v6.0.0-alpha.9)

Context

No response

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.2.1 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.5.0 - ~\AppData\Local\pnpm\pnpm.CMD
  Browsers:
    Chrome: Version 126.0.6478.127 - Used for testing
    Edge: Chromium (127.0.2651.74)
  npmPackages:
    typescript: 5.5.3 => 5.5.3

Search keywords: overflowing, alpha

[mnajdova]

What are you wrapping these TextFields in? I am asking because we had some breaking changes in the Unstable_Grid2 component that may be changing the behavior. Can you create a codensadbox so we can investigate the code?

[EliasVal]

the TextFields are wrapped in divs with a text-align: center property.

[EliasVal]

Here's the CodeSandbox of the TextField overflowing the div: https://codesandbox.io/p/devbox/musing-feather-qrft2v
I included everything nearly like in the actual project

Edit: Play with the version of @mui/material, when it is set to 6.0.0-alpha.9, the TextField takes the width of the parent, any version afterwards and it simply overflows

[EliasVal]

Is there an update on this?

[ZeeshanTamboli]

@EliasVal, the TextFields aren't rendering correctly in the CodeSandbox link you shared. Here's what I see:

Additionally, there are many errors and warnings in the console.