[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.

[EliasVal]

@ZeeshanTamboli What is incorrect about the rendering? other than the fact that the TextField is overflowing the container...
Also, the errors are irrelevant since they're simply just Invalid DOM property errors

[ZeeshanTamboli]

@EliasVal, I’m not understanding how TextField is overflowing the container based on the image above. Which container? Can you clarify?

Also, you mentioned here that you included everything similar to the actual project, but I don’t see it.

It would be better to simplify and minimize the reproduction and not run the whole project. This StackBlitz sandbox template may be a good starting point.

[EliasVal]

@ZeeshanTamboli, I didn't reproduce the entire project, I reproduced the TextField component as closely as possible to my project.

If you check the CodesandBox again, you'll see I marked the containing div with a red border, and you'll see that the TextField is overflowing said div.

[ZeeshanTamboli]

This issue arose due to the change in #42283, where width: 100% was replaced with flexGrow: 1 on the input. See the discussion here: #42283 (comment). cc @DiegoAndai

I'll mark it as a regression because it worked before. The TextField should never overflow its container, regardless of the container's width. Also I believe the previous use of width: 100% was incorrect because that should only be applied when the TextField needs to take up the full width of its container (as with the fullWidth prop). For instance, if the container is wider than the TextField, width: 100% would correctly fill the space. However, if the container is narrower, the TextField should shrink to fit, not overflow.

[EliasVal]

This happened due to the change in #42283, where width: 100% was replaced with flexGrow: 1 on the input. See the discussion here: #42283 (comment). cc @DiegoAndai

Well, then it seems that the current solution is to edit the root theme and add back the width: '100%' to the InputBase->input.
I will close this issue for now, reopen if it's an actual bug

[ZeeshanTamboli]

This happened due to the change in #42283, where width: 100% was replaced with flexGrow: 1 on the input. See the discussion here: #42283 (comment). cc @DiegoAndai

Well, then it seems that the current solution is to edit the root theme and add back the width: '100%' to the InputBase->input. I will close this issue for now, reopen if it's an actual bug

@EliasVal I think it's a bug. Your solution is a workaround.

[ZeeshanTamboli]

Created PR #43364 to fix it.