[material-ui][Autocomplete] Shouldn't resize when hovering (@ZeeshanT…

…amboli) (#42535) Co-authored-by: Zeeshan Tamboli <zeeshan.tamboli@gmail.com>
mui · Jun 5, 2024 · 7c2235e · 7c2235e
1 parent 8b66a36
commit 7c2235e
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 36 deletions.
diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.js b/packages/mui-material/src/Autocomplete/Autocomplete.js
@@ -87,6 +87,15 @@ 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)',
@@ -103,23 +112,6 @@ 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': {

diff --git a/test/regressions/fixtures/Autocomplete/SmallAutocompleteWithStartAdornment.js b/test/regressions/fixtures/Autocomplete/SmallAutocompleteWithStartAdornment.js
@@ -20,25 +20,27 @@ export default function SmallAutocompleteWithStartAdornment() {
         <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>
-            ),
+          slotProps={{
+            input: {
+              ...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>
+              ),
+            },
           }}
         />
       )}