[Autocompete][material] Fix value overflow when disableClearable is… (

#34053)
mui · Aug 25, 2022 · a94977f · a94977f
1 parent 97fd105
commit a94977f
Show file tree

Hide file tree

Showing 2 changed files with 126 additions and 1 deletion.
diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.js b/packages/mui-material/src/Autocomplete/Autocomplete.js
@@ -144,7 +144,11 @@ const AutocompleteRoot = styled('div', {
     },
   },
   [`& .${outlinedInputClasses.root}.${inputBaseClasses.sizeSmall}`]: {
-    padding: 6,
+    // Don't specify paddingRight, as it overrides the default value set when there is only
+    // one of the popup or clear icon as the specificity is equal so the latter one wins
+    paddingTop: 6,
+    paddingBottom: 6,
+    paddingLeft: 6,
     [`& .${autocompleteClasses.input}`]: {
       padding: '2.5px 4px 2.5px 6px',
     },

diff --git a/test/regressions/fixtures/Autocomplete/SizeSmallValueOverflow.js b/test/regressions/fixtures/Autocomplete/SizeSmallValueOverflow.js
@@ -0,0 +1,121 @@
+import * as React from 'react';
+import Stack from '@mui/material/Stack';
+import Chip from '@mui/material/Chip';
+import Autocomplete from '@mui/material/Autocomplete';
+import TextField from '@mui/material/TextField';
+
+const movies = [
+  {
+    title: 'The Lord of the Rings: The Two Towers',
+    year: 2002,
+  },
+];
+
+export default function Sizes() {
+  return (
+    <Stack spacing={2} sx={{ width: 300 }}>
+      <Autocomplete
+        id="size-small-outlined"
+        size="small"
+        options={movies}
+        getOptionLabel={(option) => option.title}
+        defaultValue={movies[0]}
+        disableClearable
+        renderInput={(params) => <TextField {...params} label="Movie" placeholder="Favorites" />}
+      />
+      <Autocomplete
+        multiple
+        id="size-small-outlined-multi"
+        size="small"
+        options={movies}
+        getOptionLabel={(option) => option.title}
+        defaultValue={[movies[0]]}
+        disableClearable
+        renderInput={(params) => <TextField {...params} label="Movie" placeholder="Favorites" />}
+      />
+      <Autocomplete
+        id="size-small-outlined"
+        size="small"
+        options={movies}
+        getOptionLabel={(option) => option.title}
+        defaultValue={movies[0]}
+        renderInput={(params) => <TextField {...params} label="Movie" placeholder="Favorites" />}
+      />
+      <Autocomplete
+        multiple
+        id="size-small-outlined-multi"
+        size="small"
+        options={movies}
+        getOptionLabel={(option) => option.title}
+        defaultValue={[movies[0]]}
+        renderInput={(params) => <TextField {...params} label="Movie" placeholder="Favorites" />}
+      />
+      <Autocomplete
+        id="size-small-standard"
+        size="small"
+        options={movies}
+        getOptionLabel={(option) => option.title}
+        defaultValue={movies[0]}
+        disableClearable
+        renderInput={(params) => (
+          <TextField {...params} variant="standard" label="Movies" placeholder="Favorites" />
+        )}
+      />
+      <Autocomplete
+        multiple
+        id="size-small-standard-multi"
+        size="small"
+        options={movies}
+        getOptionLabel={(option) => option.title}
+        defaultValue={[movies[0]]}
+        disableClearable
+        renderInput={(params) => (
+          <TextField {...params} variant="standard" label="Movies" placeholder="Favorites" />
+        )}
+      />
+      <Autocomplete
+        id="size-small-filled"
+        size="small"
+        options={movies}
+        getOptionLabel={(option) => option.title}
+        defaultValue={movies[0]}
+        disableClearable
+        renderTags={(value, getTagProps) =>
+          value.map((option, index) => (
+            <Chip
+              variant="outlined"
+              label={option.title}
+              size="small"
+              {...getTagProps({ index })}
+            />
+          ))
+        }
+        renderInput={(params) => (
+          <TextField {...params} variant="filled" label="Movies" placeholder="Favorites" />
+        )}
+      />
+      <Autocomplete
+        multiple
+        id="size-small-filled-multi"
+        size="small"
+        options={movies}
+        getOptionLabel={(option) => option.title}
+        defaultValue={[movies[0]]}
+        disableClearable
+        renderTags={(value, getTagProps) =>
+          value.map((option, index) => (
+            <Chip
+              variant="outlined"
+              label={option.title}
+              size="small"
+              {...getTagProps({ index })}
+            />
+          ))
+        }
+        renderInput={(params) => (
+          <TextField {...params} variant="filled" label="Movies" placeholder="Favorites" />
+        )}
+      />
+    </Stack>
+  );
+}