[TextField] Make fullWidth the default on form element?

[oliviertassinari]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Summary 💡

Coming from https://github.com/marmelab/react-admin/issues/8796, it seems it's common for UI libraries to set fullWidth={true} as the default behavior (see benchmark). Maybe we should do the same for MUI's open-source projects.

https://stackblitz.com/edit/react-ts-fbuqu9?file=App.tsx

An alternative option would be to set a consistent min-width CSS property on all the inputs. However, it would be surprising to override, so unlikely to fly.

Examples 🌈

• https://getbootstrap.com/docs/5.3/forms/form-control/
• https://ant.design/components/input
• https://chakra-ui.com/docs/components/input/usage
• https://sancho-ui.com/components/form/#input
• https://baseweb.design/components/input/
• https://seek-oss.github.io/braid-design-system/components/TextField
• https://balance.reckon.com/package/text-input
• https://tailwindui.com/components/application-ui/forms/input-groups

Motivation 🔦

In most of the time, as a developer, you need to set a width to an input element. Sometimes, it's width: 100%, sometimes, it's not, but it's almost never the default value. So maybe we should make this breaking change.

[fzaninotto]

The problem, as I described in https://github.com/marmelab/react-admin/issues/8796, is different: inputs have an inconsistent width by default, which makes the first version of a form always misaligned.

The solution you describe (a 100% width by default) would be a big breaking change. Currently, devs keep the default width when it's large enough to accommodate the content (e.g. for year, zip code, etc), and change it when the possible value is big (e.g. email). Your change would reverse this need for customization, and break all existing form layouts. Also, it would make forms unusable on large screens by default.

I'm +1 with a min-width equal to the current TextField width (computed by the browser using the default size of 20. It would only affect types of field Date and Select, which we do have to change width every time. I don't think a min width is hard to override.

[oliviertassinari]

I don't think a min width is hard to override.

The problem is that developers wouldn't understand why when they set thenwidth property, it's not applied correctly. They would need to know min-width takes precedence over width, they would need to know that the style is applied. IMHO, this is too much requirement. We have a prior art with the Tabs that has a min width and people who struggle to customize it.

I would personally struggle as I wouldn't be able to remember which element has a min width, and because there are others reason why the width might be wrong, I would need to dive into the dev tool => not a great experience.

[fzaninotto]

Whats the status of this discussion?