[material-ui][Autocomplete] Improve design when there's a start adornment for small autocomplete

docs/pages/material-ui/api/autocomplete.json

@@ -281,6 +281,12 @@
       "description": "Styles applied to the loading wrapper.",
       "isGlobal": false
     },
+    {
+      "key": "multiple",
+      "className": "MuiAutocomplete-multiple",
+      "description": "Styles applied when the autocomplete supports multiple selections.",
+      "isGlobal": false
+    },
     {
       "key": "noOptions",
       "className": "MuiAutocomplete-noOptions",

docs/translations/api-docs/autocomplete/autocomplete.json

@@ -253,6 +253,9 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the loading wrapper"
     },
+    "multiple": {
+      "description": "Styles applied when the autocomplete supports multiple selections."
+    },
     "noOptions": {
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the no option wrapper"

packages/mui-material/src/Autocomplete/Autocomplete.d.ts

@@ -39,6 +39,7 @@ export type AutocompleteOwnerState<
   focused: boolean;
   fullWidth: boolean;
   getOptionLabel: (option: Value | AutocompleteFreeSoloValueMapping<FreeSolo>) => string;
+  multiple: boolean;
   hasClearIcon: boolean;
   hasPopupIcon: boolean;
   inputFocused: boolean;

packages/mui-material/src/Autocomplete/Autocomplete.js

@@ -32,6 +32,7 @@ const useUtilityClasses = (ownerState) => {
     expanded,
     focused,
     fullWidth,
+    multiple,
     hasClearIcon,
     hasPopupIcon,
     inputFocused,
@@ -48,7 +49,7 @@ const useUtilityClasses = (ownerState) => {
       hasClearIcon && 'hasClearIcon',
       hasPopupIcon && 'hasPopupIcon',
     ],
-    inputRoot: ['inputRoot'],
+    inputRoot: ['inputRoot', multiple && 'multiple'],
     input: ['input', inputFocused && 'inputFocused'],
     tag: ['tag', `tagSize${capitalize(size)}`],
     endAdornment: ['endAdornment'],
@@ -72,7 +73,7 @@ const AutocompleteRoot = styled('div', {
   slot: 'Root',
   overridesResolver: (props, styles) => {
     const { ownerState } = props;
-    const { fullWidth, hasClearIcon, hasPopupIcon, inputFocused, size } = ownerState;
+    const { fullWidth, multiple, hasClearIcon, hasPopupIcon, inputFocused, size } = ownerState;
 
     return [
       { [`& .${autocompleteClasses.tag}`]: styles.tag },
@@ -82,26 +83,20 @@ const AutocompleteRoot = styled('div', {
       { [`& .${autocompleteClasses.input}`]: inputFocused && styles.inputFocused },
       styles.root,
       fullWidth && styles.fullWidth,
+      multiple && styles.multiple,
       hasPopupIcon && styles.hasPopupIcon,
       hasClearIcon && styles.hasClearIcon,
     ];
   },
 })({
-  [`&.${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.multiple}`]: {
+      flexWrap: 'wrap',
+    },
     [`.${autocompleteClasses.hasPopupIcon}&, .${autocompleteClasses.hasClearIcon}&`]: {
       paddingRight: 26 + 4,
     },
@@ -113,6 +108,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': {

packages/mui-material/src/Autocomplete/Autocomplete.test.js

@@ -1,27 +1,27 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { expect } from 'chai';
 import {
   act,
   createRenderer,
   fireEvent,
   screen,
   strictModeDoubleLoggingSuppressed,
 } from '@mui-internal/test-utils';
-import { spy } from 'sinon';
-import userEvent from '@testing-library/user-event';
-import Box from '@mui/system/Box';
-import { ThemeProvider, createTheme } from '@mui/material/styles';
-import TextField from '@mui/material/TextField';
-import Chip, { chipClasses } from '@mui/material/Chip';
 import Autocomplete, {
   autocompleteClasses as classes,
   createFilterOptions,
 } from '@mui/material/Autocomplete';
-import { paperClasses } from '@mui/material/Paper';
+import Chip, { chipClasses } from '@mui/material/Chip';
 import { iconButtonClasses } from '@mui/material/IconButton';
 import InputAdornment from '@mui/material/InputAdornment';
+import { paperClasses } from '@mui/material/Paper';
+import TextField from '@mui/material/TextField';
 import Tooltip from '@mui/material/Tooltip';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import Box from '@mui/system/Box';
+import userEvent from '@testing-library/user-event';
+import { expect } from 'chai';
+import PropTypes from 'prop-types';
+import * as React from 'react';
+import { spy } from 'sinon';
 import describeConformance from '../../test/describeConformance';
 
 function checkHighlightIs(listbox, expected) {
@@ -503,6 +503,18 @@ describe('<Autocomplete />', () => {
       });
     });
 
+    it('should apply the multiple class', () => {
+      const { container } = render(
+        <Autocomplete
+          openOnFocus
+          options={[]}
+          renderInput={(params) => <TextField {...params} />}
+          multiple
+        />,
+      );
+      expect(container.querySelector(`.${classes.inputRoot}`)).to.have.class(classes.multiple);
+    });
+
     it('should remove the last option', () => {
       const handleChange = spy();
       const options = ['one', 'two'];

packages/mui-material/src/Autocomplete/autocompleteClasses.ts

@@ -1,5 +1,5 @@
-import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 
 export interface AutocompleteClasses {
   /** Styles applied to the root element. */
@@ -18,6 +18,8 @@ export interface AutocompleteClasses {
   tagSizeSmall: string;
   /** Styles applied to the tag elements, for example the chips if `size="medium"`. */
   tagSizeMedium: string;
+  /** Styles applied when the autocomplete supports multiple selections. */
+  multiple: string;
   /** Styles applied when the popup icon is rendered. */
   hasPopupIcon: string;
   /** Styles applied when the clear icon is rendered. */
@@ -71,6 +73,7 @@ const autocompleteClasses: AutocompleteClasses = generateUtilityClasses('MuiAuto
   'tag',
   'tagSizeSmall',
   'tagSizeMedium',
+  'multiple',
   'hasPopupIcon',
   'hasClearIcon',
   'inputRoot',