mui / material-ui

Materialย UI: Ready-to-use foundational React components, free forever. It includes Material UI, which implements Google's Material Design.
https://mui.com/material-ui/
MIT License
92.45k stars 31.85k forks source link

[Autocomplete][material-ui] `fullwidth=true` always passed to inner component #36841

Open guoyunhe opened 1 year ago

guoyunhe commented 1 year ago

Duplicates

Latest version

Steps to reproduce ๐Ÿ•น

Link to live example: https://stackblitz.com/edit/react-zc5u5j?file=demo.js

Steps:

  1. create <Autocomplete/> with a <TextField/> as inner input.
  2. see the render result.
  3. inspect React props with React Dev Tools.

Current behavior ๐Ÿ˜ฏ

The <Autocomplete/> is full width, even if I didn't specify fullwidth prop.

After inspecting the props of <TextField/>, I found that <Autocomplete/> always pass fullwidth={true} to inner input component, which is unexpected.

image

Expected behavior ๐Ÿค”

It should not be fullwidth if I din't tell it to be. This makes the component more predictable.

Context ๐Ÿ”ฆ

No response

Your environment ๐ŸŒŽ

npx @mui/envinfo ``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. ```
michaldudak commented 1 year ago

You're right, the fullWidth prop on the Autocomplete seems to only add the .MuiAutocomplete-fullWidth class on the root element and does not control the actual input. This was done in #19805. @oliviertassinari, the description of the PR doesn't explain why this was done this way. Do you still remember anything about this PR?

michaldudak commented 1 year ago

Changing this behavior will break existing layouts. We can work on it when preparing v6.