Material UI - Autocomplete Styling

Question

I am trying to style the padding so that the icon is pushed to the far right side in an AutoComplete Material UI component which is currently being overridden by this style:

.MuiAutocomplete-hasPopupIcon.MuiAutocomplete-hasClearIcon .MuiAutocomplete-inputRoot[class*="MuiOutlinedInput-root"]

This is the code:

const useStyles = makeStyles(theme => ({
  inputRoot: {
    color: "blue",
    fontFamily: "Roboto Mono",
    backgroundColor: fade("#f2f2f2", 0.05),
    "& .MuiOutlinedInput-notchedOutline": {
      borderWidth: '2px',
      borderColor: "blue"
    },
    "&:hover .MuiOutlinedInput-notchedOutline": {
      borderWidth: "2px",
      borderColor: "blue"
    },
    "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
      borderWidth: "2px",
      borderColor: "blue"
    }
  }
}));

const textStyles = makeStyles({
  formControlRoot: {
    fontFamily: "Roboto Mono",
    width: "50vw",
    color: "#ffffff",
    borderRadius: "7px",
    position: "relative",
    "& label.Mui-focused": {
      color: "blue"
    },
  },
  inputLabelRoot: {
    color: "#ffffff",
    fontFamily: "Roboto Mono",
    "&.focused": {
      color: "#ffffff"
    }
  },
});

export default function ComboBox() {
  const classes = useStyles();
  const textClasses = textStyles();

  return (
    <Autocomplete
      id="combo-box-demo"
      classes={classes}
      // options={top100Films}
      getOptionLabel={option => option.title}
      renderInput={params => {
        return (
          <TextField
            {...params}
            label="Combo box"
            variant="outlined"
            classes={{ root: textClasses.formControlRoot }}
            fullWidth
            InputProps={{
              ...params.InputProps,
              endAdornment: (
                <InputAdornment position="end">
                  <SearchIcon />
                </InputAdornment>
              )
            }}
            InputLabelProps={{ classes: {root: textClasses.inputLabelRoot}}}
          />
        );
      }}
    />
  );
}

And this is the result:

Answer 1

You are specifying the endAdornment for the Input, but Autocomplete also tries to specify the endAdornment. Your endAdornment is winning, but the Autocomplete is still trying to apply all of the CSS related to its end adornment (space for the popup icon and clear icon).

You can turn off the CSS related to the Autocomplete's end adornment by passing the props that turn off those features:

    <Autocomplete
      disableClearable
      forcePopupIcon={false}

• v4 CodeSandbox: https://codesandbox.io/s/autocomplete-with-custom-endadornment-86c87?file=/src/App.js
• v5 CodeSandbox: https://codesandbox.io/s/autocomplete-with-custom-endadornment-euzor?file=/src/App.js

Alternatively, if you want to keep the clear icon and/or force-popup icon (arrow-drop-down icon), you can leverage cloneElement to add the search icon to the existing end adornment as shown below.

import React from "react";
import Autocomplete from "@mui/material/Autocomplete";
import TextField from "@mui/material/TextField";
import SearchIcon from "@mui/icons-material/Search";
import { styled } from "@mui/material/styles";

const StyledSearchIcon = styled(SearchIcon)`
  vertical-align: middle;
`;
function addSearchIconToEndAdornment(endAdornment) {
  const children = React.Children.toArray(endAdornment.props.children);
  children.push(<StyledSearchIcon />);
  return React.cloneElement(endAdornment, {}, children);
}
export default function ComboBox() {
  return (
    <Autocomplete
      id="combo-box-demo"
      options={top100Films}
      getOptionLabel={(option) => option.title}
      renderInput={(params) => {
        return (
          <TextField
            {...params}
            label="Combo box"
            variant="outlined"
            fullWidth
            InputProps={{
              ...params.InputProps,
              endAdornment: addSearchIconToEndAdornment(
                params.InputProps.endAdornment
              )
            }}
          />
        );
      }}
    />
  );
}