[material-ui][Autocomplete] Improve design when there's a start adorn…

…ment for small autocomplete (@TahaRhidouani) (#42176) Co-authored-by: Taha Rhidouani <37096708+TahaRhidouani@users.noreply.github.com> Co-authored-by: ZeeshanTamboli <zeeshan.tamboli@gmail.com>
mui · May 9, 2024 · c44cb3f · c44cb3f
1 parent 9bc4fc4
commit c44cb3f
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 10 deletions.
diff --git 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
@@ -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 (
+    <Autocomplete
+      options={movies}
+      value={movies[0]}
+      sx={{ width: 120, mt: 2 }}
+      renderInput={(params) => (
+        <TextField
+          {...params}
+          label="Autocomplete"
+          InputProps={{
+            ...params.InputProps,
+            startAdornment: (
+              <SvgIcon>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  strokeWidth={1.5}
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M4.5 12a7.5 7.5 0 0015 0m-15 0a7.5 7.5 0 1115 0m-15 0H3m16.5 0H21m-1.5 0H12m-8.457 3.077l1.41-.513m14.095-5.13l1.41-.513M5.106 17.785l1.15-.964m11.49-9.642l1.149-.964M7.501 19.795l.75-1.3m7.5-12.99l.75-1.3m-6.063 16.658l.26-1.477m2.605-14.772l.26-1.477m0 17.726l-.26-1.477M10.698 4.614l-.26-1.477M16.5 19.794l-.75-1.299M7.5 4.205L12 12m6.894 5.785l-1.149-.964M6.256 7.178l-1.15-.964m15.352 8.864l-1.41-.513M4.954 9.435l-1.41-.514M12.002 12l-3.75 6.495"
+                  />
+                </svg>
+              </SvgIcon>
+            ),
+          }}
+        />
+      )}
+    />
+  );
+}