Material UI - Select Menu with End Adornment

Question

Is it possible to get an endAdornment into a Select menu in MaterialUI?

I want to add content to the right hand side of the down pointer on the select menu.

endAdornment={
   <InputAdornment position="end">
        <Insights />
   </InputAdornment>

<Select
   labelId="demo-mutiple-name-label"
   id="demo-mutiple-name"
   multiple
   value={fieldName}
   onChange={handleChange}
   input={<Input id="select-multiple-chip" />}
   renderValue={(selected) => (
     <div className={classes.chips}>
     {selected.map((value) => (
        <Chip key={value} label={value} className={classes.chip} />
        ))}
     </div>
     )}
     MenuProps={MenuProps}
   >
   {field.map((field) => (
    <MenuItem key={field} value={field} >
        {field}
    </MenuItem>
   ))}
                            
</Select>

Answer 1

I took Javier answer but did the styling a bit different. As he mentions, Material UI Select Component supports endAdornment, but, it doesn't work quite well with the Select arrow. The main problem is that whatever you put there, it will overlap it. Here's an example of how I did it.

First, define a class that you will apply to the InputAdornment element. You simply need to give it a bit of right padding so that it doesn't render on top of the arrow:

const useStyles = makeStyles((theme) =>
  createStyles({
    selectAdornment: {
      marginRight: theme.spacing(3),
    },
  })
);

Then just add the class to the InputAdornment in your Select

<FormControl className={classes.rowInputRoot} error={!!error}>
  <Select
    labelId="id"
    value={selectValue}
    endAdornment={
      <InputAdornment className={classes.selectAdornment} position="end">
        <CircularProgress size={20} />
      </InputAdornment>
    }
  >
    <MenuItem value="" selected>
      <em>Select</em>
    </MenuItem>
    {rowData.listValues?.map((value, i) => {
      return <MenuItem value={value[idPropName]}>{value.label}</MenuItem>;
    })}
  </Select>
</FormControl>;

This will render the adornment with a bit of margin right to avoid overlapping with the Select arrow.

Answer 2

Instead of using <Select>, we could use <TextField> with <MenuItem> in it.

<TextField
      style={{ width: "100%" }}
      name="cls"
      select
      label="Items"
      helperText="Please select Class"
      margin="normal"
      variant="outlined"
      InputProps={{
        endAdornment: (
          <InputAdornment position="start">something</InputAdornment>
        )
      }}
    >
      <MenuItem>Item 1</MenuItem>
      <MenuItem>Item 2</MenuItem>
      <MenuItem>Item 3</MenuItem>
    </TextField>
  );

See the sample sandbox example https://codesandbox.io/s/material-demo-forked-9vqb3?file=/demo.js