mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.96k stars 32.27k 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.