From a94977f150185851cb0ae737383eeb6ca25718e3 Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Thu, 25 Aug 2022 10:56:57 +0200
Subject: [PATCH] =?UTF-8?q?[Autocompete][material]=20Fix=20value=20overflo?=
 =?UTF-8?q?w=20when=20`disableClearable`=20is=E2=80=A6=20(#34053)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/Autocomplete/Autocomplete.js          |   6 +-
 .../Autocomplete/SizeSmallValueOverflow.js    | 121 ++++++++++++++++++
 2 files changed, 126 insertions(+), 1 deletion(-)
 create mode 100644 test/regressions/fixtures/Autocomplete/SizeSmallValueOverflow.js

diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.js b/packages/mui-material/src/Autocomplete/Autocomplete.js
index 21499255e769d0..9de58b04320b93 100644
--- 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
new file mode 100644
index 00000000000000..aa6e4a8c382f53
--- /dev/null
+++ 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>
+  );
+}