My Autocomplete component from material UI v5 includes a default endAdornment icon. However, the icon appears to have the CSS property top:unset, causing it to be styled incorrectly.
Here is the code for rendering the Autocomplete:
<Grid item xs={3}>
<FormControl style={{ backgroundColor: "#fff !important" }}>
<Autocomplete
renderInput={(props) => {
return (
<TextField
{...props}
label={`${translateFullContent(
t,
i18n,
`ActionSelector.shiftGroup`,
)}`}
variant="outlined"
placeholder="Select a shift group"
sx={{
backgroundColor: "#fff",
}}
/>
);
}}
style={{
width: "300px",
}}
options={shiftGroupList}
getOptionLabel={(option: ShiftGroupListInterface) => {
return option.name;
}}
onChange={(
_event: React.SyntheticEvent<Element, Event>,
newValue: ShiftGroupListInterface | null,
) => {
if (newValue) {
handleShiftGroupSelection(newValue);
}
}}
value={selectors.shiftGroup}
isOptionEqualToValue={(option, value) => {
if (option.id === value.id) {
return true;
}
return false;
}}
/>
</FormControl>
</Grid>;
The functionality of the Autocomplete appears to be working correctly. The only issue is the position of the dropdown arrow in the endAdornment, which currently looks like this:
https://i.sstatic.net/jsB9t.png
After inspecting the CSS of the .end-Adornment class, I found that the problem is due to the top:unset property in the CSS. Removing this property and applying top: 50% fixes the issue, as shown in this image:
https://i.sstatic.net/Gq04x.png
Here is how it looks after removing top:unset: