diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.js b/packages/mui-material/src/Autocomplete/Autocomplete.js index 2aea5bf347fb6b..a81286fc3615ea 100644 --- a/packages/mui-material/src/Autocomplete/Autocomplete.js +++ b/packages/mui-material/src/Autocomplete/Autocomplete.js @@ -87,21 +87,11 @@ const AutocompleteRoot = styled('div', { ]; }, })({ - [`&.${autocompleteClasses.focused} .${autocompleteClasses.clearIndicator}`]: { - visibility: 'visible', - }, - /* Avoid double tap issue on iOS */ - '@media (pointer: fine)': { - [`&:hover .${autocompleteClasses.clearIndicator}`]: { - visibility: 'visible', - }, - }, [`& .${autocompleteClasses.tag}`]: { margin: 3, maxWidth: 'calc(100% - 6px)', }, [`& .${autocompleteClasses.inputRoot}`]: { - flexWrap: 'wrap', [`.${autocompleteClasses.hasPopupIcon}&, .${autocompleteClasses.hasClearIcon}&`]: { paddingRight: 26 + 4, }, @@ -113,6 +103,23 @@ const AutocompleteRoot = styled('div', { minWidth: 30, }, }, + [`&.${autocompleteClasses.focused}`]: { + [`& .${autocompleteClasses.clearIndicator}`]: { + visibility: 'visible', + }, + [`& .${autocompleteClasses.input}`]: { + minWidth: 0, + }, + }, + /* Avoid double tap issue on iOS */ + '@media (pointer: fine)': { + [`&:hover .${autocompleteClasses.clearIndicator}`]: { + visibility: 'visible', + }, + [`&:hover .${autocompleteClasses.input}`]: { + minWidth: 0, + }, + }, [`& .${inputClasses.root}`]: { paddingBottom: 1, '& .MuiInput-input': { @@ -215,6 +222,14 @@ const AutocompleteRoot = styled('div', { }, }, }, + { + props: { multiple: true }, + style: { + [`& .${autocompleteClasses.inputRoot}`]: { + flexWrap: 'wrap', + }, + }, + }, ], }); diff --git a/test/regressions/fixtures/Autocomplete/SmallAutocompleteWithStartAdornment.js b/test/regressions/fixtures/Autocomplete/SmallAutocompleteWithStartAdornment.js new file mode 100644 index 00000000000000..cb24cec0e649a8 --- /dev/null +++ b/test/regressions/fixtures/Autocomplete/SmallAutocompleteWithStartAdornment.js @@ -0,0 +1,47 @@ +import * as React from 'react'; +import Autocomplete from '@mui/material/Autocomplete'; +import SvgIcon from '@mui/material/SvgIcon'; +import TextField from '@mui/material/TextField'; + +const movies = [ + { + label: 'The Lord of the Rings: The Two Towers', + year: 2002, + }, +]; + +export default function SmallAutocompleteWithStartAdornment() { + return ( + ( + + + + + + ), + }} + /> + )} + /> + ); +}